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 ...
随机推荐
- 最全最新java面试题系列全家桶(带答案)
最全最新java面试题系列全家桶(带答案) 置顶 2019年04月06日 22:40:28 青春季风暴 阅读数 14082 文章标签: java面试题技术栈 更多 分类专栏: 面试 版权声明:本文 ...
- 7.bash作业控制
7.作业控制本节讨论作业控制是什么.它怎么工作.以及 Bash 里面怎么使用这些功能7.1 作业控制基础作业控制是指有选择的停止(暂停)并在后来继续(恢复)执行某个进程的能力.通常,用户通过 Bash ...
- 查询进程内存,cpu占用情况。僵尸进程
查使用内存最多的5个进程:ps aux | head -1 && ps aux | grep -v USER | sort -nr -k 4 | head -5 查使用CPU最多的5个 ...
- C# struct结构知识总结
结构是一种值类型,使用struct关键字定义. 结构可以包含字段.常量.事件.属性.方法.构造函数.索引器.运算符和嵌套类型.但若结构中同时需要上述所有成员,应考虑将结构改为类. 嵌套类型:在类或构造 ...
- webpack配置不同打包配置
生成环境与开发环境打包配置 使用package.json配置npm run开启不同的打包配置 ...webpack基本使用最后一篇博客 在上一篇博客中详细的演示了webpack开启本地服务和热更新,这 ...
- Java高并发程序设计学习笔记(三):Java内存模型和线程安全
转自:https://blog.csdn.net/dataiyangu/article/details/86412704 原子性有序性可见性– 编译器优化– 硬件优化(如写吸收,批操作)Java虚拟机 ...
- Mount Windows (CIFS) shares on Linux with credentials in a secure way
Posted on 09/09/2014 In almost all cases, when mounting a CIFS-share on a Linux host, you will nee ...
- 【转】bitbake 笔记
原文 http://blog.csdn.net/xiaofeng_yan/article/details/6757725 1 当你已经编完一个系统比如sato映像,在编一个meta-toolchain ...
- vmware修改虚拟机名称
原虚拟机名称为:OLD_VMNAME需要修改成:NEW_VMNAME vmware创建虚拟机时,会以虚拟机名称存储对应的磁盘和配置文件.如果只在vcenter界面上修改虚拟机名称存储端名称是不会修改的 ...
- pv与pvc
目的: 为了屏蔽底层存储实现的细节, 让用户方便使用同时让管理员方便管理, 引入了pv与pvc两种资源对象实现对存储的管理子系统 pv: 对底层网络共享存储的抽象, 将共享存储定义为一种资源 pvc: ...