对于某些密码，想要在手机上调出数字键盘，同时要隐藏文字。可结合type=tel和 text-security属性达到目的。

input{

            -webkit-text-security:disc;

            text-security:disc; /*使用指定形状代替文字显示 circle圆圈 disc 圆形 square 正方形*/

        }
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>输入密码时，调出手机的数字键盘</title>

    <style>

        input{

            -webkit-text-security:disc;

            text-security:disc; /*使用指定形状代替文字显示 circle圆圈 disc 圆形 square 正方形*/

        }

    </style>

</head>

<body>

<input type="tel" id="pass" />

    <script>

        window.onload = init;

        function init(){

            var x = document.getElementById("pass");

            var style = window.getComputedStyle(x);

            if(style.webkitTextSecurity){

                //do nothing

            }else{

                x.setAttribute("type","password");

            }

        }

    </script>

</body>

</html>

input 密码框调出手机的数字键盘的更多相关文章

  1. input验证码框，输入非数字或非12位时，红框提示;每4位加一个空格

    以下代码:input验证码框,输入非数字或非12位时,红框提示;每4位加一个空格 //input验证码框,输入非数字或非12位时,红框提示;每3位加一个空格 $(".text"). ...

  2. input密码框输入后设置显示为星号或其他样式

    预览效果 核心代码 <div class="text-input" :class="right?'textinput-right':''"> < ...

  3. 【自创+转发】jQuery给input 密码框绑定回车事件

    <script type="text/javascript" src="Scripts/jquery-1.6.2.js"></script&g ...

  4. 去掉input密码框自动补全功能

    <input name="password" autocomplete="off" hidden> <input type="pas ...

  5. input输入框直接拉起九宫格数字键盘

    <input type="number" pattern="\d*">

  6. 【笔记】移动端H5数字键盘input type=number的处理（IOS和Android）

    在Vue中的项目,基于VUX-UI开发,一个常见的需求: 1.金额输入框 2.弹出数字键盘 3.仅支持输入两位小数,限制最大11位数,不允许0开头 后续:与UI沟通后, 思路调整为限制输入,并减少正则 ...

  7. VirtualBox中出现UUID have already exists ，并且数字键盘numlock效果相反

    原文地址:https://www.cnblogs.com/xqzt/p/5053338.html 原因:由于linux密码登录错误,修改也报错误,所以只能重新安装虚拟机并在其中安装镜像文件,但是安装镜 ...

  8. input 手机数字键盘

    要一点击提起数字键盘,安卓只要设置input的类型是number或tel, ios 需要 pattern="number"可以直接打开搜狗输入法的数字键盘,可以输入.和数字如果只能 ...

  9. [HTML5]移动开发不同手机弹出数字键盘问题

    这里还是先那么先交代一下遇到的问题.其实无论是tel还是number都不是完美的:type="tel"优点是iOS和Android的键盘表现都差不多缺点是那些字母好多余,虽然我没有 ...

随机推荐

  1. E - 今年暑假不AC HDU - 2037

    "今年暑假不AC?"  "是的."  "那你干什么呢?"  "看世界杯呀,笨蛋!"  "@#$%^&* ...

  2. Linux学习——shell编程之运算符

    shell编程之运算符 一:shell中常见算术运算符号和优先级 二:算术运算符 Shell 变量:是弱类型!不能进行加减乘除!比较麻烦! 例子 :shell变量弱类型 a=11 b=22 echo ...

  3. js的严格模式详解

    什么是js的严格模式? 严格模式指的是使js在更为严格的条件下运行.严格模式的主要作用是规范我们写代码习惯,以及为js升级做好铺垫.  如何使用严格模式? <script> //直接在代码 ...

  4. .NET十年回顾

    一.   引子 从我还是编程菜鸟时起,.NET就从来没让我失望过.总是惊喜不断. 当年我第一个项目是做个进销存.用的Winform.当时我是机电工程师.编程只是业余心血来潮而已. .NET的低门槛.V ...

  5. Oracle虚拟机VirtualBox安装成功后的注意事项

    首先VirtualBox的安装教程 (1)按文档安装 (2)安装完之后配置共享文件夹 (3)安装windowxp镜像 (4)安装Oracle  详情请见Oracle安装文档 (5)启动xp虚拟机 (6 ...

  6. java web mysql 入门知识讲解

     MySQL学习笔记总结 一.SQL概述: SQL:Structured Query Language的缩写(结构化查询语言) SQL工业标准:由ANSI(ISO核心成员) 按照工业标准编写的SQ ...

  7. c#中list使用示例

    protected void Page_Load(object sender, EventArgs e) { List<string> studentNames = new List< ...

  8. Jquery购物车jsorder改进版,支持后台处理程序直接转换成DataTable处理

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. asp.net中配置使用Sqlite轻型数据库

    Sqlite 管理工具 SQLiteDeveloper及破解 功能特点 表结构设计,数据维护,ddl生成,加密数据库支持,sqlite2,3支持 唯一缺憾,收费,有试用期 破解方法: 注册表删除 HK ...

  10. css百分比参照大总结

    最近做PC端项目,由于要自适应到800*600,所以免不了要使用百分比的布局方式,但是一开始有点搞不清楚百分比的参照,于是页面的布局怎么调也调不好. 事后我进行了一下总结,希望能够帮到大家: 参照父元 ...