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

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

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

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

推荐文章

Nginx 如何防止 DDoS 攻击
2024-11-18 21:51:48 +0800 CST
Vue3中如何进行异步组件的加载?
2024-11-17 04:29:53 +0800 CST
Graphene:一个无敌的 Python 库!
2024-11-19 04:32:49 +0800 CST
Python上下文管理器:with语句
2024-11-19 06:25:31 +0800 CST
Vue3中如何进行性能优化?
2024-11-17 22:52:59 +0800 CST
使用 `nohup` 命令的概述及案例
2024-11-18 08:18:36 +0800 CST
PHP 代码功能与使用说明
2024-11-18 23:08:44 +0800 CST
程序员出海搞钱工具库
2024-11-18 22:16:19 +0800 CST
Elasticsearch 条件查询
2024-11-19 06:50:24 +0800 CST
JavaScript设计模式:单例模式
2024-11-18 10:57:41 +0800 CST
Python 基于 SSE 实现流式模式
2025-02-16 17:21:01 +0800 CST
微信内弹出提示外部浏览器打开
2024-11-18 19:26:44 +0800 CST
Vue3中如何使用计算属性?
2024-11-18 10:18:12 +0800 CST
MySQL用命令行复制表的方法
2024-11-17 05:03:46 +0800 CST
25个实用的JavaScript单行代码片段
2024-11-18 04:59:49 +0800 CST
一个简单的打字机效果的实现
2024-11-19 04:47:27 +0800 CST
Rust async/await 异步运行时
2024-11-18 19:04:17 +0800 CST
程序员茄子在线接单