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

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

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

原代码为:<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 前端

推荐文章

API 管理系统售卖系统
2024-11-19 08:54:18 +0800 CST
前端代码规范 - Commit 提交规范
2024-11-18 10:18:08 +0800 CST
在Vue3中实现代码分割和懒加载
2024-11-17 06:18:00 +0800 CST
CSS实现亚克力和磨砂玻璃效果
2024-11-18 01:21:20 +0800 CST
120个实用CSS技巧汇总合集
2025-06-23 13:19:55 +0800 CST
全栈利器 H3 框架来了!
2025-07-07 17:48:01 +0800 CST
MySQL 主从同步一致性详解
2024-11-19 02:49:19 +0800 CST
前端如何一次性渲染十万条数据?
2024-11-19 05:08:27 +0800 CST
平面设计常用尺寸
2024-11-19 02:20:22 +0800 CST
php客服服务管理系统
2024-11-19 06:48:35 +0800 CST
html流光登陆页面
2024-11-18 15:36:18 +0800 CST
页面不存在404
2024-11-19 02:13:01 +0800 CST
基于Webman + Vue3中后台框架SaiAdmin
2024-11-19 09:47:53 +0800 CST
mysql 计算附近的人
2024-11-18 13:51:11 +0800 CST
浅谈CSRF攻击
2024-11-18 09:45:14 +0800 CST
Python中何时应该使用异常处理
2024-11-19 01:16:28 +0800 CST
程序员茄子在线接单