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 ...
随机推荐
- Python内置函数(36)——reversed
英文文档: reversed(seq) Return a reverse iterator. seq must be an object which has a __reversed__() meth ...
- springboot多模块项目下,子模块调用报错:程序包xxxxx不存在
今天在用springboot搭建多模块项目,结构中有一个父工程Parent 一个通用核心工程core 以及一个项目工程A 当我在工程A中引入core时,没有问题,maven install正常 当我 ...
- 【漏洞复现】PHPCMS wap模块 SQL注入(附EXP)
漏洞影响版本:v9.5.8.v9.6.0 Step1: 访问:http://www.xxx.com/index.php?m=wap&a=index&siteid=1, 获取返回的coo ...
- 初次面对c++
第一次实验 2-4源码: #include<iostream> using namespace std; int main() { int day; cin>>day; swi ...
- float和position
float float是欺骗父元素,让其父元素误以为其高度塌陷了,但float元素本身仍处于文档流中,文字会环绕着float元素,不会被遮蔽. absolute 但absolute其实已经不能算是欺骗 ...
- Python入门之三元表达式\列表推导式\生成器表达式\递归匿名函数\内置函数
本章目录: 一.三元表达式.列表推导式.生成器表达式 二.递归调用和二分法 三.匿名函数 四.内置函数 ================================================ ...
- Spark:如何替换sc.parallelize(List(item1,item2)).collect().foreach(row=>{})为并行?
代码场景: 1)设定的几种数据场景,遍历所有场景:依次统计满足每种场景条件下的数据,并把统计结果存入hive: 2)已有代码如下: case class IndoorOTTCalibrateBuild ...
- POJ- 1094 Sorting It All Out---拓扑排序是否唯一的判断
题目链接: https://vjudge.net/problem/POJ-1094 题目大意: 该题题意明确,就是给定一组字母的大小关系判断他们是否能组成唯一的拓扑序列.是典型的拓扑排序,但输出格式上 ...
- 对return函数的认识
例1: def funOut(): def funIn(): print('宾果!你成功访问到我啦!') return funIn() #注意这里return的是funIn()即是一个函数 funOu ...
- python3安装ibm_db
在安装好python3之后,使用pip install ibm_db总是报错. 然后按照官方文档的说明添加了环境变量IBM_DB_HOME, 同时在命令行执行easy_install ibm_db就可 ...