input type="tel" 数字输入框显示圆点
最近开发中遇到一个这样的需求,要求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" 数字输入框显示圆点的更多相关文章
- input type="tel" 输入框显示密文
为了在移动端实现密码输入框且调起的键盘为数字键盘,可以用-webkit-text-security:disc;text-security:disc;属性来实现. 语法: text-security: ...
- [转载]Js小技巧||给input type=“password”的输入框赋默认值
http://www.cnblogs.com/Raywang80s/archive/2012/12/06/2804459.html [转载]Js小技巧||给input type="passw ...
- 上传文件 隐藏input type="file",用text显示
<div> <span>上传文件:</span> <input type="file" id="upload_file" ...
- input[type="file"]上传图片并显示图片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 限制input[type=number]的输入位数策略整理
当我们使用类型number的input输入框的时候,我们可能需要限制输入的位数,这个时候通常会想到maxlength,但是maxlength是在number类型的时候是不支持的,下面是一些解决这种问题 ...
- 输入类型<input type="number"> / input标签的输入限制
输入限制 属性 描述 disabled 规定输入字段应该被禁用. max 规定输入字段的最大值. maxlength 规定输入字段的最大字符数. min 规定输入字段的最小值. pattern 规定通 ...
- 去掉 input type="number" 右边图标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- H5 限制input只能输入数字
<input type="tel" /> 参考: http://blog.csdn.net/kongjiea/article/details/40185951
- 动手写个数字输入框1:input[type=number]的遗憾
前言 最近在用Polymer封装纯数字的输入框,开发过程中发现不少坑,也有很多值得研究的地方.本系列打算分4篇来叙述这段可歌可泣的踩坑经历: <动手写个数字输入框1:input[type=nu ...
随机推荐
- vue组件详解(二)——使用props传递数据
在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的. 一.基本用法 组件不仅仅 ...
- pygame事件之——控制物体(飞机)的移动
近来想用pygame做做游戏,在 xishui 大神的目光博客中学了学这东西,就上一段自己写的飞机大战的代码,主要是对键盘控制飞机的移动做了相关的优化 # -*- coding: utf-8 -*- ...
- kafka之zookeeper 节点
1.zookeeper 节点 kafka 在 zookeeper 中的存储结构如下图所示:
- 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. ...
- Java:现有线程T1/T2/T3,如何确保T1执行完成之后执行T2,T3在T2执行完成之后执行。
要实现多个线程执行完成先后,就要知道如何实现线程之间的等待,java线程等待实现是join.java的jdk中join方法实现如下: public final synchronized void jo ...
- 南京邮电大学java程序设计作业在线编程第三次作业
王利国的"Java语言程序设计第3次作业(2018)"详细 作业结果详细 总分:100 选择题得分:60 1. 设有如下定义语句: String s1="My cat& ...
- hdu1003 Max Sum---最大子段和+记录开始结束点
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1003 题目大意: 求最大子段和,并且输出最大子段和的起始位置和终止位置. 思路: 根据最大子段和基本 ...
- 元组tuple插入字符串的方式
元组无法更改,但是可以用切片的方式将头尾切出,中间'+'字符串,后整体赋值原先的元组,举例如下 >>> temp=('东邪','西毒' ,'南帝') >>> tem ...
- 给工作添点乐趣--- 为Idea编译时打印图案
控制台输出图案--banner 之前用vs开发时,也可以自己设置编译时控制台打印出的图案,我们管它叫banner. 给idea设置banner 先见一下效果图 还有重磅的 好了.其实设置这个很简单.分 ...
- 1020关于MYCAT的安装和使用总结
第一部分 读写分离配置 转自:http://www.51testing.com/html/34/369434-3686088.html 使用Mycat 做简单的读写分离(一) 原本使用的是amoeba ...