当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启动时就自动加载一个类,或运行一个类的方法. 可以 ...
随机推荐
- 暴力求解Calculator:The Game
本文详实的记录的我的思考过程,类似流水账.... 目前已经烂尾,我对付不了133关后面的关卡 这个手机游戏挺不错的,就是有点难,所以要写程序,暴力的通关. 游戏名字:Calculator:The Ga ...
- 控件包含代码块(即 <% ... %>),因此无法修改控件集合。
原因分析:在head里写的js代码中包含了<%=...%>代码 解决:把js的代码放到body中...
- Touch事件在移动端web开发中的详解
一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件 事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题 移动设备主要特点是不配备鼠标,键盘 ...
- [Swift]LeetCode911. 在线选举 | Online Election
In an election, the i-th vote was cast for persons[i] at time times[i]. Now, we would like to implem ...
- 一文掌握 Linux 性能分析之网络篇
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 这是 Linu ...
- ASP.NET MVC one view bind many model
一.自定义视图模型 model.cs public class AorBvm { public List<Role> GetRole { get; set; } public List&l ...
- 华为oj之字符串反转
题目: 字符串反转 热度指数:4940 时间限制:1秒 空间限制:32768K 本题知识点: 字符串 题目描述 写出一个程序,接受一个字符串,然后输出该字符串反转后的字符串.例如: 输入描述: 输入N ...
- 解构领域驱动设计(一):为什么DDD能够解决软件复杂性
1 为什么我要研究领域驱动设计 1.1 设计方法各样且代码无法反映设计 我大概从2017年10月份开始研究DDD,当时在一家物流信息化的公司任职架构师,研究DDD的初衷在于为团队寻找一种软件设计的方法 ...
- HashMapd的存取原理你知道多少
在java的容器集合中,hashmap的使用频率可以说是相当高的.不过对于hashmap的存(put())以及取(get())的原理可能很多人还不大清楚,今天,我就给大家介绍下它是如何存如何取的. # ...
- 初学Java Web(2)——搭建Java Web开发环境
虽然说 html 和 css 等前端技术,是对于 Web 来说不可或缺的技术,但是毕竟更为简单一些,所以就不详细介绍了,没有基础的同学可以去菜鸟教程或者W3school进行自主学习,最好的方式还是做一 ...