最近开发中遇到一个这样的需求,要求input输入框在手机端出现数字键盘的同时显示圆点,试过各种方法都不太理想,

最终经过查阅大量资料后,终于实现了需求。

●我们一般的密码输入框是这样的:

<input  type="password" placeholder="请输入密码">

这个实现了输入密码显示圆点的需求,但是手机上他调出来的是字母键盘,所以不符合开发需求。

●所以最终的密码输入框是这样的:

<input type="tel" maxlength="6" style="-webkit-text-security:circle"  placeholder="请输入密码">

  释: -webkit-text-security用法,

    指定用于在密码输入字段中代替字母的形状。

    语法:-webkit-text-security: circle | disc | none | square;

      circle:圆形;  disc:圆盘形状(句号)  none:没有使用形状;  square:方形的;

版权声明:本文为博主原创文章,转载需注明出处。http://www.cnblogs.com/silent007/p/8947569.html

***************************************   END   *******************************************

input type="tel" 数字输入框显示圆点的更多相关文章

  1. input type="tel" 输入框显示密文

    为了在移动端实现密码输入框且调起的键盘为数字键盘,可以用-webkit-text-security:disc;text-security:disc;属性来实现. 语法: text-security: ...

  2. [转载]Js小技巧||给input type=“password”的输入框赋默认值

    http://www.cnblogs.com/Raywang80s/archive/2012/12/06/2804459.html [转载]Js小技巧||给input type="passw ...

  3. 上传文件 隐藏input type="file",用text显示

    <div> <span>上传文件:</span> <input type="file" id="upload_file" ...

  4. input[type="file"]上传图片并显示图片

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 限制input[type=number]的输入位数策略整理

    当我们使用类型number的input输入框的时候,我们可能需要限制输入的位数,这个时候通常会想到maxlength,但是maxlength是在number类型的时候是不支持的,下面是一些解决这种问题 ...

  6. 输入类型<input type="number"> / input标签的输入限制

    输入限制 属性 描述 disabled 规定输入字段应该被禁用. max 规定输入字段的最大值. maxlength 规定输入字段的最大字符数. min 规定输入字段的最小值. pattern 规定通 ...

  7. 去掉 input type="number" 右边图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. H5 限制input只能输入数字

    <input type="tel" /> 参考: http://blog.csdn.net/kongjiea/article/details/40185951

  9. 动手写个数字输入框1:input[type=number]的遗憾

    前言  最近在用Polymer封装纯数字的输入框,开发过程中发现不少坑,也有很多值得研究的地方.本系列打算分4篇来叙述这段可歌可泣的踩坑经历: <动手写个数字输入框1:input[type=nu ...

随机推荐

  1. wordpress怎么禁止文章复制

    登陆你的网站后台--点击菜单栏的"外观"--点击"编辑"--在右侧,找到footer.php,打开它--在</body>之前加入以下代码: 1.禁止 ...

  2. Docker1.12.6+CentOS7.3 的安装

    安装旧版的docker-engine-1.12.6 kubeadm init --api-advertise-addresses=172.16.160.211命令的时候,提示docker版本太新了 一 ...

  3. MicrosoftWebInfrastructure 之坑

    从svn下载下来的项目,还原提示缺少MicrosoftWebInfrastructure   包 网上大多数解决方法  PM> Install-Package Microsoft.Web.Inf ...

  4. python/零起点(一、列表)

    python/零起点(一.列表) 列表(list)list()可以强行转换数据类型为列表,列表是可迭代对象 列表是有序的,且列表是可变的数据类型 列表中的元素可以是(字符串.整型.元祖.列表.字典.集 ...

  5. python Django之Ajax

    python Django之Ajax AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案. 异步 ...

  6. ZooKeeper:win7上安装单机及伪分布式安装

    zookeeper是一个为分布式应用所设计的分布式的.开源的调度服务,它主要用来解决分布式应用中经常遇到的一些数据管理问题,简化分布式应用,协调及其管理的难度,提高性能的分布式服务. 本章的目的:如何 ...

  7. Beautiful Soup常见的解析器

    Beautiful Soup支持Python标准库中的HTML解析器,还支持一些第三方的解析器,如果我们不安装它,则 Python 会使用 Python默认的解析器,lxml 解析器更加强大,速度更快 ...

  8. cookielib和urllib2模块结合模拟网站登录

    1.cookielib模块 cookielib模块的主要作用就是提供可存储cookie的对象,以便于与urllib2模块配合使用来访问internet资源,例如可以利用本模块的cookiejar类的对 ...

  9. ORACLE数据库之PL/SQL触发器、rownum、动态SQL、数据库之视图与索引

    WHEN子句说明触发约束条件.Condition为一个逻辑表达时,其中必须包含相关名称,而不能包含查询语句,也不能调用PL/SQL函数.WHEN子句指定的触发约束条件只能用在BEFORE和AFTER行 ...

  10. MyBatis(2)——MyBatis 深入学习

    编写日志输出环境配置文件 在开发过程中,最重要的就是在控制台查看程序输出的日志信息,在这里我们选择使用 log4j 工具来输出: 准备工作: 将[MyBatis]文件夹下[lib]中的 log4j 开 ...