当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启动时就自动加载一个类,或运行一个类的方法. 可以 ...
随机推荐
- Reactjs组件中的方法为什么绑定this?
前言:Reactjs中的定义的方法其实是基于实例的原型方法:es6默认严格模式 问题:在Reactjs组件中写入以下代码,那么执行结果会是什么呢? ··· 结果是这样的: 对的,你没看错,不是do ...
- ubuntu amd64 的锐捷连接解决办法---武汉大学
昨日博主闲来弄了个ubuntu玩玩,于是上网成了个问题,博主武大信息学部,锐捷上校园网.装的是13.04的amd64. 凑巧在珞珈山水bbs上看到我在解决上网出现问题出现的相同情况,但是没有人回答,于 ...
- OSGi类加载流程
思路 OSGi每个模块都有自己独立的classpath.如何实现这一点呢?是因为OSGi采取了不同的类加载机制: OSGi为每个bundle提供一个类加载器,该加载器能够看到bundle Jar文件内 ...
- [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 ...
- [Swift]LeetCode983. 最低票价 | Minimum Cost For Tickets
In a country popular for train travel, you have planned some train travelling one year in advance. ...
- Node.js 种子下载器
Node.js 种子下载器 庆祝 2018 国庆,制作了一个 Node.js 的种子下载器.爬取页面,根据页面的链接,破解另外一个网站,下载种子文件.项目比较简单,爬取页面没有使用任何爬虫框架.项目源 ...
- 什么是 IP 隧道,Linux 怎么实现隧道通信?
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 通过之前的文章 ...
- nginx处理cookie跨域
今天在部署公司项目的时候碰到一个问题 项目地址是xxx.xx.xx.122:7480 项目A后台请求地址为xxx.xx.xx.123:8080/data-sso 开始nginx配置是 server { ...
- mac openresty 源码安装 坑
下载openresty源码安装 下载页面http://openresty.org/cn/download.html 下载上一个版本的稳定版 https://openresty.org/download ...
- Socket网络编程知识点
静态方法 与类无关,不能访问类里的任何属性和方法类方法 只能访问类变量属性@property 把一个方法变成一个静态属性, flight.status @status.s ...