最近开发中遇到一个这样的需求,要求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. vue组件详解(二)——使用props传递数据

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的.  一.基本用法 组件不仅仅 ...

  2. pygame事件之——控制物体(飞机)的移动

    近来想用pygame做做游戏,在 xishui 大神的目光博客中学了学这东西,就上一段自己写的飞机大战的代码,主要是对键盘控制飞机的移动做了相关的优化 # -*- coding: utf-8 -*- ...

  3. kafka之zookeeper 节点

    1.zookeeper 节点 kafka 在 zookeeper 中的存储结构如下图所示:

  4. Android fragment切换后onresume时报 Attempt to write to field 'int android.support.v4.app.Fragment.mNextAnim'

    动态加载fragment以后,调用了remove方法移除Fragment,在返回来的时候报 Attempt to write to field 'int android.support.v4.app. ...

  5. Java:现有线程T1/T2/T3,如何确保T1执行完成之后执行T2,T3在T2执行完成之后执行。

    要实现多个线程执行完成先后,就要知道如何实现线程之间的等待,java线程等待实现是join.java的jdk中join方法实现如下: public final synchronized void jo ...

  6. 南京邮电大学java程序设计作业在线编程第三次作业

    王利国的"Java语言程序设计第3次作业(2018)"详细 作业结果详细 总分:100 选择题得分:60  1. 设有如下定义语句: String s1="My cat& ...

  7. hdu1003 Max Sum---最大子段和+记录开始结束点

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1003 题目大意: 求最大子段和,并且输出最大子段和的起始位置和终止位置. 思路: 根据最大子段和基本 ...

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

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

  9. 给工作添点乐趣--- 为Idea编译时打印图案

    控制台输出图案--banner 之前用vs开发时,也可以自己设置编译时控制台打印出的图案,我们管它叫banner. 给idea设置banner 先见一下效果图 还有重磅的 好了.其实设置这个很简单.分 ...

  10. 1020关于MYCAT的安装和使用总结

    第一部分 读写分离配置 转自:http://www.51testing.com/html/34/369434-3686088.html 使用Mycat 做简单的读写分离(一) 原本使用的是amoeba ...