需求背景

需要输入一串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. QEMU KVM Libvirt手册(7): 硬件虚拟化

    在openstack中,如果我们启动一个虚拟机,我们会看到非常复杂的参数 qemu-system-x86_64 -enable-kvm -name instance-00000024 -S -mach ...

  2. S-CMS企建v3二次SQL注入

    S-CMS企建v3二次SQL注入 0x01 前言 继上一篇的S-CMS漏洞再来一波!首发T00ls 0x2 目录 Sql注入二次SQL注入 0x03 Sql注入 漏洞文件:\scms\bbs\bbs. ...

  3. [SQL]LeetCode178. 分数排名 | Rank Scores

    Write a SQL query to rank scores. If there is a tie between two scores, both should have the same ra ...

  4. [Swift]LeetCode620. 有趣的电影 | Not Boring Movies

    SQL架构 Create table If Not Exists cinema (id ), description varchar(), rating , )) Truncate table cin ...

  5. Redis 设计与实现 (二)--数据库

    typedef struct redisDb { dict *dict; /* The keyspace for this DB */ dict *expires; /* Timeout of key ...

  6. Spring设计模式_工厂模式

    先说下工厂模式的特性 1.对于调用者来说,影藏了复杂的逻辑处理过程,调用者只关心执行结果. 2.工厂要对结果负责,保证生产出符合规范的产品. Git代码地址  https://github.com/w ...

  7. ThinkPHP 数据库操作(一) : 连接数据库

    ThinkPHP内置了抽象数据库访问层,把不同的数据库操作封装起来,我们只需要使用公共的Db类进行操 作,而无需针对不同的数据库写不同的代码和底层实现,Db类会自动调用相应的数据库驱动来处理.采用 P ...

  8. 带着新人学springboot的应用01(springboot+mybatis+缓存 上)

    上一篇结束,第一次做一个这么长的系列,很多东西我也是没有说到,也许是还没有想到,哈哈哈,不过基本的东西还是说的差不多了的.假如以后碰到了不会的,随便查查资料配置一下就ok. 咳,还有大家如果把我前面的 ...

  9. 基于hashicorp/raft的分布式一致性实战教学

    本文由云+社区发表 作者:Super 导语:hashicorp/raft是raft算法的一种比较流行的golang实现,基于它能够比较方便的构建具有强一致性的分布式系统.本文通过实现一个简单的分布式缓 ...

  10. CentOS6.5下DNS服务器搭建与配置

    一.安装机器情况 192.168.1.70(dns 主节点) 192.168.1.71(dns 从节点) 二.主节点DNS的安装及配置 1. DNS服务器所需的软件包安装 yum -y install ...