最近开发中遇到一个这样的需求,要求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. 使用HTML5视频事件示例

    <!DOCTYPE html > <html > <head> <title>Video events example</title> &l ...

  2. Python内置函数(36)——reversed

    英文文档: reversed(seq) Return a reverse iterator. seq must be an object which has a __reversed__() meth ...

  3. ssl双向认证

    ssl双向认证 一.背景知识 1.名词解释 ca.key: 根证书的私钥 , ca.crt: 根证书的签名证书 server.key, server.crt client.key, client.cr ...

  4. NHibernate与IbatisNet的简单比较

    NHibernate是当前最流行的Java O/R mapping框架Hibernate的移植版本,当前版本是1.0 rc-1.它出身于sf.net..IbatisNet是另外一种优秀的Java O/ ...

  5. CSS中容易混淆的伪元素类型和用法

    :first-of-type 匹配属于其父元素的第一个特定类型的子元素. 1.例子 <head> <meta charset="UTF-8"> <ti ...

  6. leetcode算法: Find All Duplicates in an Array

    Given an array of integers, 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and others ...

  7. Struts(十九):类型转换、类型转换错误消息及显示

    类型转换概念 1.从html表单页面到一个Action对象,类型转化是从字符串到一个非字符串:html并没有“类型”的概念,每个表单输入的信息都只可能是一个字符串或者一个字符串数组,但是在服务器端,必 ...

  8. Java面试题—初级(4)

    31.String s = new String("xyz");创建了几个StringObject?是否可以继承String类? 两个或一个都有可能,"xyz" ...

  9. 元组tuple插入字符串的方式

    元组无法更改,但是可以用切片的方式将头尾切出,中间'+'字符串,后整体赋值原先的元组,举例如下 >>> temp=('东邪','西毒' ,'南帝') >>> tem ...

  10. ls-dyna基础教程

    刚刚开始使用ls-dyna,几天前还只知道点开dyna界面,然后就没有然后了,没人带,资料也没多少,但是科研还得继续往下做呀(手动滑稽),通过在仿真论坛上搜索相关的资料,并通过自己的一步步操作,做了大 ...