需求背景

需要输入一串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框的更多相关文章

  1. js input框输入1位数字后自动跳到下一个input框聚焦

    // input框输入1位数字后自动跳到下一个input聚焦 function goNextInput(el){ var txts = document.querySelectorAll(el); f ...

  2. 验证码输入自动聚焦下一个input或者删除自动聚焦上一个input

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. [开发技巧]·HTML检测输入已完成自动填写下一个内容

    [开发技巧]·HTML检测输入已完成自动填写下一个内容 个人网站 --> http://www.yansongsong.cn 在上一个博客中简易实现检测输入已完成,我们实现了检测输入已完成,现在 ...

  4. js限制input只能输入有效的数字,有且只有一个小数点,第一个不能为小数点-备

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Jquery 实现input回车时跳转到下一个input元素

      /** * 回车时跳转到下一个元素 * @Author HTL * @DateTime 2016-12-30T11:33:25+0800 * @param {[type]} $input [INP ...

  6. jQuery回车键快速切换下一个input文本框解决方案

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 解决Chrome浏览器自动记录用户名和密码的黄色背景问题和该解决方法与tab切换至下一个input冲突的问题。

    哈哈哈,是不是标题很长呀,不逗你们了.其实这么长的标题主要就说了两件事: 第一件:解决Chrome浏览器自动记录用户名和密码的黄色背景问题. 第二件:输入完用户名后按下tab键切换至下一个输入密码in ...

  8. Tomcat启动时自动加载一个类

    有时候在开发Web应用的时候,需要tomcat启动后自动加载一个用户的类,执行一些初始化方法,如从数据库中加载业务字典到内存中,因此需要在tomcat启动时就自动加载一个类,或运行一个类的方法. 可以 ...

  9. 如何在tomcat启动时自动加载一个类

    有时候在开发web应用的时候,需要tomcat启动后自动加载一个用户的类,执行一些初始化方法,如从数据库中加载业务字典到内存中,因此需要在tomcat启动时就自动加载一个类,或运行一个类的方法. 可以 ...

随机推荐

  1. 将博客搬至CSDN http://blog.csdn.net/yi_xianyong

    将博客搬至CSDN http://blog.csdn.net/yi_xianyong

  2. iptables实现--kafka限制ip地址访问

    iptables -I INPUT -p tcp --dport 9092:9094 -j DROPiptables -I INPUT -s 10.144.137.32 -p tcp --dport ...

  3. JS基础整理

    使用JS的三种方式 1.直接在html标签中,使用事件属性,调用js代码 <button onclick="alert('弹框')">弹框!</button> ...

  4. Java提高篇(三):内部类和匿名内部类

    一,内部类 其实内部类是十分简单的,我们根据其字里行间的意义就可以知道内部类应该是一个类当中的一个类,相当于一个类进行了嵌套,就如同循环的嵌套一般. 内部类有一个特征:内部类当中可以调用外部类当中的属 ...

  5. 消息队列RabbitMq、ActiveMq、ZeroMq、kafka之间的比较

    MQ框架非常之多,比较流行的有RabbitMq.ActiveMq.ZeroMq.kafka.这几种MQ到底应该选择哪个?要根据自己项目的业务场景和需求.下面我列出这些MQ之间的对比数据和资料. 第一部 ...

  6. [Swift]LeetCode675. 为高尔夫比赛砍树 | Cut Off Trees for Golf Event

    You are asked to cut off trees in a forest for a golf event. The forest is represented as a non-nega ...

  7. FAutoTest-微信小程序 / 公众号H5 自动化利器

    X5内核H5自动化背景 近来有很多童靴咨询如何做微信小程序/公众号等H5页面来做自动化,之前写了一篇文章微信小程序自动化测试实践 https://www.cnblogs.com/yyoba/p/945 ...

  8. JVM基础系列第2讲:Java 虚拟机的历史

    说起 Java 虚拟机,许多人就会将其与 HotSpot 虚拟机等同看待.但实际上 Java 虚拟机除了 HotSpot 之外,还有 Sun Classic VM.Exact VM.BEA JRock ...

  9. 『玩具装箱TOY 斜率优化DP』

    玩具装箱TOY(HNOI2008) Description P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊 ...

  10. 懵逼的this指向

    请看以下代码: 以上的console.log打印出来的,如果你能完全知道,请忽略,如果你不知道,那就接下来看吧. console.log打印的结果: Google非常智能地把对象给打印出来了,看结果, ...