js输入密文弹出数字键盘
我们经常被产品要求,在移动端的web页面上的输入框输入密码时要弹出数字键盘,而不是全键盘,这个该怎么实现呢?
1.首先要弹出数字键盘,我们只能把input框的type从password改为tel
2.但经过第一步,输入的内容会变成明文,这时候也要星号显示,改怎么实现
经过一番研究,找到如下的实现方法:
function setPass(e) {
var target = e.currentTarget,
idx = target.selectionStart,
val = $(target).val(),
nextval = $(target).next().val(),
maxLen = $(target).attr('maxlength') || 6,
single = val.slice(idx - 1, idx),
left = '',
right = '';
if (val.length == nextval.length) return;
if (val.length > nextval.length) { //添加
if (/\d/g.test(single)) { //如果是数字
left = nextval ? (nextval.slice(0, idx - 1) + single) : single;
right = nextval.slice(idx - 1, maxLen);
}
if (/\D/g.test(single)) { //如果是非数字字符
left = nextval ? nextval.slice(0, idx - 1) : '';
right = nextval.slice(idx - 1, maxLen);
}
}
if (val.length < nextval.length) { //删除
left = nextval ? nextval.slice(0, idx) : '';
right = nextval.slice(idx + 1, maxLen);
}
val = (left + right).replace(/\d/g, "●");
if (!val) {
$(target).next().val(left + right);
} else {
$(target).val(val).next().val(left + right);
} }
当输入框的input事件触发的时候调用以上方法
<input type='tel' id='psd'> document.getElementById('psd').onclick=setPass;
效果如下
这里有两个input,为什么一个输入框要有两个input呢?因为第一个是用来触发setPass事件的,把用户输入的字符转换成星号显示,第二个才是真正用来提交数据的(第二个得隐藏)
js输入密文弹出数字键盘的更多相关文章
- [HTML5]移动开发不同手机弹出数字键盘问题
这里还是先那么先交代一下遇到的问题.其实无论是tel还是number都不是完美的:type="tel"优点是iOS和Android的键盘表现都差不多缺点是那些字母好多余,虽然我没有 ...
- Android使用Fragment定义弹出数字键盘
fragment主布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmln ...
- android开发之使edittext输入弹出数字软键盘。亲测可用。手机号登陆注册常用。
<EditText android:id="@+id/edit_digit_input" android:layout_width="wrap_content&qu ...
- android EditText设置弹出数字输入法键盘
<EditText android:id="@+id/edit_digit_input" android:layout_width="wrap_ ...
- Xcode6.1模拟器ios8.1模拟器不能弹出虚拟键盘及虚拟键盘无法切换中文输入的解决办法
1.不能弹出虚拟键盘的解决办法 模拟器菜单Hardware->Keyboard->Connect Hardware Keyboard取消选中,快捷键commad+shift+K 2.虚拟键 ...
- (原)android的alertdialog中加入edittext但是不弹出软键盘等问题的解决与原因
摘要:alertdialog中加入edittext但是不弹出软键盘等问题网上有很多不管用的解决方案, 本文意在给出更有效的解决办法,并初步探究其原因 正文 在对话框中插入文本框是十分常见的需求 通常我 ...
- 手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法
手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法 最近碰到Android微信内置浏览H5页面,因为其中的文本输入框(input)放置在靠近页面的中下方,点击文本框以后,则输入框会被弹出的手机 ...
- ios下input focus弹出软键盘造成fixed元素位置移位
正常状态下 input focus软键盘弹出时 问题描述: 头部结构fixed,滚动到下部内容区域,input.textarea等focus弹出软键盘时,头部位置偏移被居中(该问题ios7 beta3 ...
- [Phonegap+Sencha Touch] 移动开发24 包wp8.1的App,弹出软键盘输入框聚焦实施后,无移动采收率方法来解决接口
这种现象不仅是现在显示phonegap包sencha touch的wp8.1该程序将出现(只wp8.1,wp8正常).其他js我测试了几个框架(app framework, jquery mobile ...
随机推荐
- Spring实战(六)自动装配的歧义性
1.Spring进行自动装配时碰到的bean歧义性问题. 在进行自动装配时,只有仅有一个bean匹配所需结果时,才是可行的. 如果不仅仅一个bean能够匹配结果,例如一个接口有多个实现,这种歧义性会阻 ...
- 深入理解计算机系统 第十一章 网络编程 part2 第二遍
客户端和服务器通过因特网这个全球网络来通信.从程序员的观点来看,我们可以把因特网看成是一个全球范围的主机集合,具有以下几个属性: 1.每个因特网主机都有一个唯一的 32 为名字,称为它的 IP 地址 ...
- css 字体库和动画
@font-face { font-family:'WebSymbols'; src: url('../font/WebSymbols-Regular.otf'); } .icon{ font-fam ...
- 【原创】大数据基础之Oozie(4)oozie使用的spark版本升级
oozie默认使用的spark是1.6,一直没有升级,如果想用最新的2.4,需要自己手工升级 首先看当前使用的spark版本的jar # oozie admin -oozie http://$oozi ...
- JavaSE基础知识之多态
一. 概述 多态是继封装.继承之后,面向对象的第三大特性,指同一行为,具有多个不同表现形式.生活中,比如跑的动作,小猫.小狗和大象,跑起来是不一样的.再比如飞的动作,昆虫.鸟类和飞机,飞起来也是不一样 ...
- Oracle连接字符串总结(转)
Oracle XE 标准连接 Oracle XE(或者"Oracle Database 10g Express Edition")是一个简单免费发布的版本. 以下是语法格式: Dr ...
- O032、Nova reboot 和 lock 操作
参考https://www.cnblogs.com/CloudMan6/p/5479408.html 前面通过日志详细分析了 nova 的 launch.shutoff .start 操作. ...
- 4.图片左轮播图(swiper)
一.html部分 二.js部分 三.源代码部分 <body> <div id="box"> <img src="imges/111.jpg& ...
- day09 并发编程
一. 目录 1.进程的概念和两种创建方式 2.多进程爬虫 3.守护进程 4.进程队列 5.进程队列简单应用(实现数据共享) 6.线程的两种创建方式 7.线程和进程的效率对比 8.线程共享统一进程的数据 ...
- ConfigurableApplicationContext
转自:https://blog.csdn.net/weixin_39165515/article/details/77169231 此接口结合了所有ApplicationContext需要实现的接口. ...