编程 html5 输入密码时改键盘样式为数字键盘

2024-11-18 06:51:04 +0800 CST views 3406

今天接到老板的需求,登录密码的时候需要弹出手机键盘。

原代码为:<input type="password">

#解决方案一:

<input type="tel" class="password" maxlength="6" pattern="[0-9]*" />

你以为解决了?没有这里虽然会弹出数字键盘 但是输入是明文的。所以我们需要继续优化一下

<style>
input[type="tel" i].password {
    -webkit-text-security: disc;
}
</style>

事情完美解决了.

password.jpg

苹果和安卓都测试通过了。

另外还有一种方法

<input type="password" pattern="[0-9]*" onkeyup="this.value=this.value.replace(/\D/g,'');" onafterpaste="this.value=this.value.replace(/\D/g,'');">
复制全文 生成海报 js 前端

推荐文章

实现微信回调多域名的方法
2024-11-18 09:45:18 +0800 CST
Golang 随机公平库 satmihir/fair
2024-11-19 03:28:37 +0800 CST
资源文档库
2024-12-07 20:42:49 +0800 CST
纯CSS绘制iPhoneX的外观
2024-11-19 06:39:43 +0800 CST
Vue3中怎样处理组件引用?
2024-11-18 23:17:15 +0800 CST
微信小程序热更新
2024-11-18 15:08:49 +0800 CST
微信内弹出提示外部浏览器打开
2024-11-18 19:26:44 +0800 CST
html一些比较人使用的技巧和代码
2024-11-17 05:05:01 +0800 CST
使用 Vue3 和 Axios 实现 CRUD 操作
2024-11-19 01:57:50 +0800 CST
PHP 唯一卡号生成
2024-11-18 21:24:12 +0800 CST
api接口怎么对接
2024-11-19 09:42:47 +0800 CST
乐观锁和悲观锁,如何区分?
2024-11-19 09:36:53 +0800 CST
服务器购买推荐
2024-11-18 23:48:02 +0800 CST
Elasticsearch 监控和警报
2024-11-19 10:02:29 +0800 CST
7种Go语言生成唯一ID的实用方法
2024-11-19 05:22:50 +0800 CST
Go 如何做好缓存
2024-11-18 13:33:37 +0800 CST
如何在Vue3中定义一个组件?
2024-11-17 04:15:09 +0800 CST
Web浏览器的定时器问题思考
2024-11-18 22:19:55 +0800 CST
程序员茄子在线接单