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

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

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

原代码为:<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-19 07:38:07 +0800 CST
OpenCV 检测与跟踪移动物体
2024-11-18 15:27:01 +0800 CST
html5在客户端存储数据
2024-11-17 05:02:17 +0800 CST
Vue3中的v-model指令有什么变化?
2024-11-18 20:00:17 +0800 CST
在 Docker 中部署 Vue 开发环境
2024-11-18 15:04:41 +0800 CST
Go语言中的mysql数据库操作指南
2024-11-19 03:00:22 +0800 CST
mysql时间对比
2024-11-18 14:35:19 +0800 CST
Vue 中如何处理跨组件通信?
2024-11-17 15:59:54 +0800 CST
详解 Nginx 的 `sub_filter` 指令
2024-11-19 02:09:49 +0800 CST
如何在Vue3中处理全局状态管理?
2024-11-18 19:25:59 +0800 CST
php获取当前域名
2024-11-18 00:12:48 +0800 CST
liunx宝塔php7.3安装mongodb扩展
2024-11-17 11:56:14 +0800 CST
基于Flask实现后台权限管理系统
2024-11-19 09:53:09 +0800 CST
程序员茄子在线接单