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

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

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

原代码为:<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 08:36:25 +0800 CST
JavaScript 策略模式
2024-11-19 07:34:29 +0800 CST
php获取当前域名
2024-11-18 00:12:48 +0800 CST
如何使用go-redis库与Redis数据库
2024-11-17 04:52:02 +0800 CST
Vue3中哪些API被废弃了?
2024-11-17 04:17:22 +0800 CST
OpenCV 检测与跟踪移动物体
2024-11-18 15:27:01 +0800 CST
一文详解回调地狱
2024-11-19 05:05:31 +0800 CST
Go 1.23 中的新包:unique
2024-11-18 12:32:57 +0800 CST
nginx反向代理
2024-11-18 20:44:14 +0800 CST
15 个 JavaScript 性能优化技巧
2024-11-19 07:52:10 +0800 CST
Claude:审美炸裂的网页生成工具
2024-11-19 09:38:41 +0800 CST
Go 语言实现 API 限流的最佳实践
2024-11-19 01:51:21 +0800 CST
Vue3中如何处理状态管理?
2024-11-17 07:13:45 +0800 CST
一些高质量的Mac软件资源网站
2024-11-19 08:16:01 +0800 CST
Plyr.js 播放器介绍
2024-11-18 12:39:35 +0800 CST
Requests库详细介绍
2024-11-18 05:53:37 +0800 CST
php内置函数除法取整和取余数
2024-11-19 10:11:51 +0800 CST
程序员茄子在线接单