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

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

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

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

推荐文章

在Rust项目中使用SQLite数据库
2024-11-19 08:48:00 +0800 CST
git使用笔记
2024-11-18 18:17:44 +0800 CST
一个有趣的进度条
2024-11-19 09:56:04 +0800 CST
Python 基于 SSE 实现流式模式
2025-02-16 17:21:01 +0800 CST
2024年公司官方网站建设费用解析
2024-11-18 20:21:19 +0800 CST
java MySQL如何获取唯一订单编号?
2024-11-18 18:51:44 +0800 CST
MySQL用命令行复制表的方法
2024-11-17 05:03:46 +0800 CST
全新 Nginx 在线管理平台
2024-11-19 04:18:33 +0800 CST
Go语言中实现RSA加密与解密
2024-11-18 01:49:30 +0800 CST
JavaScript中的常用浏览器API
2024-11-18 23:23:16 +0800 CST
为什么大厂也无法避免写出Bug?
2024-11-19 10:03:23 +0800 CST
详解 Nginx 的 `sub_filter` 指令
2024-11-19 02:09:49 +0800 CST
Vue3中如何实现状态管理?
2024-11-19 09:40:30 +0800 CST
html一个全屏背景视频
2024-11-18 00:48:20 +0800 CST
如何在Vue3中处理全局状态管理?
2024-11-18 19:25:59 +0800 CST
JavaScript设计模式:单例模式
2024-11-18 10:57:41 +0800 CST
程序员茄子在线接单