当input框输入到限定长度时,自动focus下一个input框
需求背景
需要输入一串15位的数字,但是要分为3个输入框,每个输入框限定长度5位,当删除当前输入框的内容时,focus到上一个输入框:
实现方法
var field = $('.phone-field');
field.on('keyup', 'input.phone-input', function(e) {
var key = e.keyCode || e.charCode;
var inputs = $('input.phone-input');
if ($(this).val().length === this.size) {
inputs.eq(inputs.index(this) + 1).focus();
}
if ((key === 8 || key === 46) && $(this).val().length === 0) {
var indexNum = inputs.index(this);
if (indexNum != 0) {
inputs.eq(inputs.index(this) - 1).focus();
}
}
})
点下面链接查看效果
https://codepen.io/pprachel/pen/maevdK
当input框输入到限定长度时,自动focus下一个input框的更多相关文章
- js input框输入1位数字后自动跳到下一个input框聚焦
// input框输入1位数字后自动跳到下一个input聚焦 function goNextInput(el){ var txts = document.querySelectorAll(el); f ...
- 验证码输入自动聚焦下一个input或者删除自动聚焦上一个input
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- [开发技巧]·HTML检测输入已完成自动填写下一个内容
[开发技巧]·HTML检测输入已完成自动填写下一个内容 个人网站 --> http://www.yansongsong.cn 在上一个博客中简易实现检测输入已完成,我们实现了检测输入已完成,现在 ...
- js限制input只能输入有效的数字,有且只有一个小数点,第一个不能为小数点-备
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jquery 实现input回车时跳转到下一个input元素
/** * 回车时跳转到下一个元素 * @Author HTL * @DateTime 2016-12-30T11:33:25+0800 * @param {[type]} $input [INP ...
- jQuery回车键快速切换下一个input文本框解决方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 解决Chrome浏览器自动记录用户名和密码的黄色背景问题和该解决方法与tab切换至下一个input冲突的问题。
哈哈哈,是不是标题很长呀,不逗你们了.其实这么长的标题主要就说了两件事: 第一件:解决Chrome浏览器自动记录用户名和密码的黄色背景问题. 第二件:输入完用户名后按下tab键切换至下一个输入密码in ...
- Tomcat启动时自动加载一个类
有时候在开发Web应用的时候,需要tomcat启动后自动加载一个用户的类,执行一些初始化方法,如从数据库中加载业务字典到内存中,因此需要在tomcat启动时就自动加载一个类,或运行一个类的方法. 可以 ...
- 如何在tomcat启动时自动加载一个类
有时候在开发web应用的时候,需要tomcat启动后自动加载一个用户的类,执行一些初始化方法,如从数据库中加载业务字典到内存中,因此需要在tomcat启动时就自动加载一个类,或运行一个类的方法. 可以 ...
随机推荐
- 微信小程序ios点击状态栏返回顶部不好使
最近做了一款微信小程序,各方面感觉都很完美(萝卜一直这么自信),今天设计总监告诉我你的小程序怎么返回顶部不好使呀,吓得我赶紧拿手机试试,没毛病啊,我手机(苦逼的安卓机)上点两下就回去了呀,遂去找他理论 ...
- Vs 开发时无法断点问题
1.清除解决方案 2.重新编译 3.删除项目目录下的obj 和 bin 4.在vs中配置 工具--项目--调试--去除勾选 要求源文件与原始版本完全匹配 关于调试问题 1.关闭诊断工具, 工具 =&g ...
- FCC(ES6写法) Validate US Telephone Numbers
如果传入字符串是一个有效的美国电话号码,则返回 true. 思路:用正则,参考网上资料和js高级程序设计(5.4RegExp类型). let telephoneCheck = str => /^ ...
- VSTS 执行git pull报错问题修复
VSTS中进行双向同步配置的git pull指令如下: 运行时报错,Log如下图所示: 原因说的很清楚了,需要提前执行以下两条git config指令: git config --global use ...
- 百度地图API 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <script type=" ...
- [Swift]LeetCode929. 独特的电子邮件地址 | Unique Email Addresses
Every email consists of a local name and a domain name, separated by the @ sign. For example, in ali ...
- [Swift]LeetCode957. N天后的牢房 | Prison Cells After N Days
There are 8 prison cells in a row, and each cell is either occupied or vacant. Each day, whether the ...
- 什么是REST接口
转载自:http://baijiahao.baidu.com/s?id=1591007540303121112&wfr=spider&for=pc 从事web开发工作有一小段时间,RE ...
- Redis学习——Windows环境下Redis的安装(二)
一.说明 之前介绍了Linux环境下Redis的安装,这次介绍一下Windows环境下Redis的安装,首先要讲的是,Redis官方只支持Linux,还好 Microsoft Open Tech gr ...
- 『2019/4/9 TGDay2模拟赛 反思与总结』
2019/4/9 TGDay2模拟赛 今天是\(TG\)模拟赛的第二天了,试题难度也是相应地增加了一些,老师也说过,这就是提高组的难度了.刚开始学难的内容,一道正解也没想出来,不过基本的思路也都是对了 ...