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

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

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

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

推荐文章

向满屏的 Import 语句说再见!
2024-11-18 12:20:51 +0800 CST
Golang 几种使用 Channel 的错误姿势
2024-11-19 01:42:18 +0800 CST
CentOS 镜像源配置
2024-11-18 11:28:06 +0800 CST
Vue 3 路由守卫详解与实战
2024-11-17 04:39:17 +0800 CST
Nginx 防盗链配置
2024-11-19 07:52:58 +0800 CST
前端如何一次性渲染十万条数据?
2024-11-19 05:08:27 +0800 CST
pycm:一个强大的混淆矩阵库
2024-11-18 16:17:54 +0800 CST
在 Rust 生产项目中存储数据
2024-11-19 02:35:11 +0800 CST
LLM驱动的强大网络爬虫工具
2024-11-19 07:37:07 +0800 CST
JavaScript设计模式:装饰器模式
2024-11-19 06:05:51 +0800 CST
Golang 中你应该知道的 Range 知识
2024-11-19 04:01:21 +0800 CST
如何在Vue中处理动态路由?
2024-11-19 06:09:50 +0800 CST
HTML + CSS 实现微信钱包界面
2024-11-18 14:59:25 +0800 CST
浅谈CSRF攻击
2024-11-18 09:45:14 +0800 CST
一些实用的前端开发工具网站
2024-11-18 14:30:55 +0800 CST
程序员茄子在线接单