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

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

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

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

推荐文章

使用 Go Embed
2024-11-19 02:54:20 +0800 CST
Elasticsearch 文档操作
2024-11-18 12:36:01 +0800 CST
38个实用的JavaScript技巧
2024-11-19 07:42:44 +0800 CST
Vue3中的v-slot指令有什么改变?
2024-11-18 07:32:50 +0800 CST
JavaScript设计模式:发布订阅模式
2024-11-18 01:52:39 +0800 CST
禁止调试前端页面代码
2024-11-19 02:17:33 +0800 CST
2025,重新认识 HTML!
2025-02-07 14:40:00 +0800 CST
imap_open绕过exec禁用的脚本
2024-11-17 05:01:58 +0800 CST
PHP服务器直传阿里云OSS
2024-11-18 19:04:44 +0800 CST
api接口怎么对接
2024-11-19 09:42:47 +0800 CST
支付页面html收银台
2025-03-06 14:59:20 +0800 CST
用 Rust 玩转 Google Sheets API
2024-11-19 02:36:20 +0800 CST
CSS Grid 和 Flexbox 的主要区别
2024-11-18 23:09:50 +0800 CST
如何在Rust中使用UUID?
2024-11-19 06:10:59 +0800 CST
浏览器自动播放策略
2024-11-19 08:54:41 +0800 CST
程序员茄子在线接单