需求背景

需要输入一串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. 查询Python版本

  2. 巧妙设置Texture Type,将ShadowMask内存占用变成之前的1/4

    0x00 前言 在这篇文章中,我选择了过去一周Unity官方社区交流群中比较有代表性的几个问题,总结在这里和大家进行分享.同时,也欢迎大家加入我们这个讨论干货的官方技术群,交流看法分享经验. Unit ...

  3. 实战深度学习OpenCV(二):读取并播放本地或者摄像头的视频

    一.读取并播放的代码如下: #include "pch.h" #include <iostream> #include <opencv2/core/core.hp ...

  4. java中级或者高级面试题分享

    一. 基础知识: 1)集合类:List和Set比较,各自的子类比较(ArrayList,Vector,LinkedList:HashSet,TreeSet): 2)HashMap的底层实现,之后会问C ...

  5. 【设计经验】5、Verilog对数据进行四舍五入(round)与饱和(saturation)截位

    一.软件平台与硬件平台 软件平台: 操作系统:Windows 8.1 64-bit 开发套件:Vivado2015.4.2  Matlab2016a 仿真工具:Vivado自带仿真器 二.引言 在利用 ...

  6. 吴恩达机器学习笔记55-异常检测算法的特征选择(Choosing What Features to Use of Anomaly Detection)

    对于异常检测算法,使用特征是至关重要的,下面谈谈如何选择特征: 异常检测假设特征符合高斯分布,如果数据的分布不是高斯分布,异常检测算法也能够工作,但是最好还是将数据转换成高斯分布,例如使用对数函数:

  7. [Swift]LeetCode67. 二进制求和 | Add Binary

    Given two binary strings, return their sum (also a binary string). The input strings are both non-em ...

  8. [Swift]LeetCode805. 数组的均值分割 | Split Array With Same Average

    In a given integer array A, we must move every element of A to either list B or list C. (B and C ini ...

  9. [Swift]LeetCode929. 独特的电子邮件地址 | Unique Email Addresses

    Every email consists of a local name and a domain name, separated by the @ sign. For example, in ali ...

  10. [Swift]LeetCode353. 设计贪吃蛇游戏 $ Design Snake Game

    Design a Snake game that is played on a device with screen size = width x height. Play the game onli ...