input的pattern属性问题

最新推荐文章于 2025-03-17 20:38:28 发布

jasondu264

最新推荐文章于 2025-03-17 20:38:28 发布

阅读量5.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript css3 html5 webkit

本文链接：https://blog.youkuaiyun.com/jasondu264/article/details/20145691

JavaScript 专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何使用HTML的input元素的pattern属性及-webkit-text-security样式属性，在iOS设备上控制键盘类型并保持密码隐藏效果。文章针对不同类型的键盘需求提供了具体的实现方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input的pattern属性不只用来验证用的，还可以控制手机键盘弹出的类型。

但控制手机键盘弹出的功能只能在ios上实现，安卓是实现不了的，所以安卓只能使用type类型来控制键盘类型，例如你要弹出数字键盘就使用type="number"，如果要弹出电话键盘就使用type="tel"，但这时又有问题了，那就是但type="password"时想弹出数字键盘该怎么办呢？？这时可以采用下面的几种办法：

使用-webkit-text-security: disc(安卓4.2.0以上才行)：

-webkit-text-security 属性：指定要使用的形状来代替文字的显示。

none	无。
circle	圆圈。
disc	圆形。
square	正方形。

http://ued.ctrip.com/blog/wp-content/webkitcss/prop/text-security.html

所以只要这样写就OK了：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<input type="number"/>
</body>
</html>
<style type="text/css">
    input[type=number] {
        -webkit-text-security: disc;
    }
</style>

参考：

http://stackoverflow.com/questions/13822548/degrading-webkit-text-security

http://www.open-open.com/news/view/1f7e5b8