最近开发中遇到一个这样的需求,要求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. oracle sequence 异常

    对于数据量较大的序列进行分析 ,出现风险有两种情况1. 序列号随着业务增加变大时,DB的字段空间不足.>>产生后果:插入报错.>>解决方案:给存储序列号的字段进行扩容,且字段长 ...

  2. R数据分析 第一篇:温习概率论

    概率论是人们在长期实践中发现的理论,是客观存在的.自然界和社会上发生的现象是多种多样的,有一类现象,在一定条件下必然发生,称作确定性现象,而概率论研究的现象是不确定性现象,嗯嗯,醒醒,概率论研究的对象 ...

  3. 设置Nginx+php-fpm显示错误信息

    Begin 最近在用PHP写后台程序,但是有错误不会显示简直坑爹,全都是200这样的错误代码而已= =... 于是 于是就搜索如何打开错误显示,然后就在博客里面记录一下 修改配置文件 /etc/php ...

  4. centos单机安装zookeeper+kafaka

    环境如下: CentOS-7-x86_64zookeeper-3.4.11kafka_2.12-1.1.0 一.zookeeper下载与安装1)下载zookeeper [root@localhost ...

  5. 一个关于C8051F350模拟电源的小问题

    前言 多做重要而不紧急的工作,慢慢的就会发现重要而紧急的工作没那么多了 工作方法 今天有好几个同事出差去现场实验了,为了今天的顺利成行,昨天加了个班,但是从项目管理的角度或者说做事的方法上来讲,这次加 ...

  6. eclipse下如何使用Hibernate反转工程生与数据库对应的实体类和映射文件(以MySQL为例)

    首先需要为eclipse添加对Hibernate的支持(也就是下载的Hibernate中的jar包),下载方法另查,这里不多做阐述. 想要使用反转工程,首先要下载Hibernate反转工程的插件Jbo ...

  7. C++ namespace的作用

    namespace:命名空间或者叫名字空间,传统的c++只有一个全局的namespace,但是由于现在的程序规模越来越大,程序的分工越来越细,全局作用域就变得越来越拥挤,每个人都可能使用相同的名字来实 ...

  8. Windows下使用console线连接思科交换机

    在XP下可以直接使用内置工具"超级终端",在win7或者更高版本需要下载安装SecureCRT. 本文假设已经下载安装好了SecureCRT. 首先,将电脑连接console线.因 ...

  9. windows下 在cmd中输入ls命令出现“ls不是内部或外部命令“解决方法

    1.新建一个文件命名为 ls.bat 2.打开编辑这个文件 输入: @echo off dir 3.将这个文件放在C:\windows目录下

  10. leetcode 283. Move Zeroes -easy

    题目链接:https://leetcode.com/problems/move-zeroes/ 题目内容: Given an array nums, write a function to move ...