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

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

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

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

推荐文章

Vue3中如何实现插件?
2024-11-18 04:27:04 +0800 CST
Vue3中如何实现国际化(i18n)?
2024-11-19 06:35:21 +0800 CST
前端如何给页面添加水印
2024-11-19 07:12:56 +0800 CST
为什么大厂也无法避免写出Bug?
2024-11-19 10:03:23 +0800 CST
Go 接口:从入门到精通
2024-11-18 07:10:00 +0800 CST
基于Webman + Vue3中后台框架SaiAdmin
2024-11-19 09:47:53 +0800 CST
总结出30个代码前端代码规范
2024-11-19 07:59:43 +0800 CST
Vue3中如何处理WebSocket通信?
2024-11-19 09:50:58 +0800 CST
JavaScript 上传文件的几种方式
2024-11-18 21:11:59 +0800 CST
Nginx 防盗链配置
2024-11-19 07:52:58 +0800 CST
pycm:一个强大的混淆矩阵库
2024-11-18 16:17:54 +0800 CST
Elasticsearch 监控和警报
2024-11-19 10:02:29 +0800 CST
软件定制开发流程
2024-11-19 05:52:28 +0800 CST
手机导航效果
2024-11-19 07:53:16 +0800 CST
五个有趣且实用的Python实例
2024-11-19 07:32:35 +0800 CST
关于 `nohup` 和 `&` 的使用说明
2024-11-19 08:49:44 +0800 CST
curl错误代码表
2024-11-17 09:34:46 +0800 CST
JavaScript 异步编程入门
2024-11-19 07:07:43 +0800 CST
HTML + CSS 实现微信钱包界面
2024-11-18 14:59:25 +0800 CST
程序员茄子在线接单