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

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

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

原代码为:<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-18 10:15:48 +0800 CST
html夫妻约定
2024-11-19 01:24:21 +0800 CST
mysql删除重复数据
2024-11-19 03:19:52 +0800 CST
在 Rust 生产项目中存储数据
2024-11-19 02:35:11 +0800 CST
如何在 Vue 3 中使用 TypeScript?
2024-11-18 22:30:18 +0800 CST
Vue3中的Scoped Slots有什么改变?
2024-11-17 13:50:01 +0800 CST
PHP 压缩包脚本功能说明
2024-11-19 03:35:29 +0800 CST
使用 Vue3 和 Axios 实现 CRUD 操作
2024-11-19 01:57:50 +0800 CST
使用Vue 3和Axios进行API数据交互
2024-11-18 22:31:21 +0800 CST
Go 语言实现 API 限流的最佳实践
2024-11-19 01:51:21 +0800 CST
HTML + CSS 实现微信钱包界面
2024-11-18 14:59:25 +0800 CST
阿里云免sdk发送短信代码
2025-01-01 12:22:14 +0800 CST
Nginx负载均衡详解
2024-11-17 07:43:48 +0800 CST
维护网站维护费一年多少钱?
2024-11-19 08:05:52 +0800 CST
CSS实现亚克力和磨砂玻璃效果
2024-11-18 01:21:20 +0800 CST
ElasticSearch 结构
2024-11-18 10:05:24 +0800 CST
浏览器自动播放策略
2024-11-19 08:54:41 +0800 CST
2024年微信小程序开发价格概览
2024-11-19 06:40:52 +0800 CST
html一个全屏背景视频
2024-11-18 00:48:20 +0800 CST
程序员茄子在线接单