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

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

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

原代码为:<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-17 07:13:45 +0800 CST
38个实用的JavaScript技巧
2024-11-19 07:42:44 +0800 CST
Nginx 性能优化有这篇就够了!
2024-11-19 01:57:41 +0800 CST
纯CSS绘制iPhoneX的外观
2024-11-19 06:39:43 +0800 CST
利用图片实现网站的加载速度
2024-11-18 12:29:31 +0800 CST
Java环境中使用Elasticsearch
2024-11-18 22:46:32 +0800 CST
liunx服务器监控workerman进程守护
2024-11-18 13:28:44 +0800 CST
Grid布局的简洁性和高效性
2024-11-18 03:48:02 +0800 CST
JS中 `sleep` 方法的实现
2024-11-19 08:10:32 +0800 CST
MySQL 主从同步一致性详解
2024-11-19 02:49:19 +0800 CST
MySQL死锁 - 更新插入导致死锁
2024-11-19 05:53:50 +0800 CST
imap_open绕过exec禁用的脚本
2024-11-17 05:01:58 +0800 CST
任务管理工具的HTML
2025-01-20 22:36:11 +0800 CST
程序员茄子在线接单