最近开发中遇到一个这样的需求,要求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. js数组string对象api常用方法

    charAt() 方法可返回指定位置的字符. stringObject.charAt(index) indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. stringObject ...

  2. Sudoku 第一步

    看到这个问题的思路是先解决生成数独生成器的编写,然后再解决数独求解的问题.最开始第一想法就是暴力求解,仔细算一下复杂度,发现这肯定耗时很久,于是看了很多博客(见转载).我们用回溯搜出来正解.

  3. 扩展Microsoft Graph数据结构 - 架构扩展

    前言 此前我有一篇 文章 讲解了Microsoft Graph的一种数据扩展技术-- 开发扩展(Open Extensions),它可以实现在支持的对象(例如用户,组等)上面附加任意的数据.但开放扩展 ...

  4. Python内置函数(31)——object

    英文文档: class objectReturn a new featureless object. object is a base for all classes. It has the meth ...

  5. 原生Ajax用法——一个简单的实例

    Ajax全名(Asynchronous(异步) JavaScript and XML )是可以实现局部刷新的 在讲AJax之前我们先用简单的实例说一下同步和异步这个概念 /*异步的概念(就是当领导有一 ...

  6. XSS和CSRF的理解

    声明:转自 http://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html XSS攻击:跨站脚本攻击(Cross Site Scripting ...

  7. Tumblr:我们是如何从 PHP 5 升级到 PHP 7 的

    Tumblr 团队经常在寻找新的方式来提升网站的性能.这意味着要给访问量大的代码增加缓存,找到更快的 CDN 配置,或者升级基础软件. 最近,通过一次跨团队的努力,我们将全部 web 服务器战舰从 P ...

  8. kafka_2.12-1.1.0 生产与消费java实现示例

    环境准备: 1)需要在maven工程中引入依赖: <!-- https://mvnrepository.com/artifact/org.apache.kafka/kafka --> &l ...

  9. linux远程传输

    scp scp 命令是 SSH中最方便有用的命令了,scp就是secure copy,是用来进行远程文件拷贝的.数据传输使用 ssh,并且和ssh 使用相同的认证方式,提供相同的安全保证. 与rcp ...

  10. Linux kernel 4.9及以上开启TCP BBR拥塞算法

    Linux kernel 4.9及以上开启TCP BBR拥塞算法 BBR 目的是要尽量跑满带宽, 并且尽量不要有排队的情况, 效果并不比速锐差 Linux kernel 4.9+ 已支持 tcp_bb ...