当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启动时就自动加载一个类,或运行一个类的方法. 可以 ...
随机推荐
- return和throw某些特性相似
拷贝构造函数的调用拷贝构造函数会在以下三中情况下被调用(1)当类的一个对象去初始化该类的另一个对象时 int main(){ Point a(1,2); Point b(a);//用对象a初始化对象b ...
- SQL Server Cast、Convert数据类型转换
一.概述 本篇文章转载来着官网在线文档,文章主要介绍SQL Server数据类型转换相关语法.隐式转换.Date样式等. 语法 Syntax for CAST: CAST ( expression A ...
- Python实现实现基于最小二乘法的线性回归
下面展示利用Python实现基于最小二乘法的线性回归模型,同时不需要引入其他科学计算以及机器学习的库. 利用Python代码表示如下: #首先引入数据集x,和y的值的大小利用Python的数据结构:列 ...
- 微信小程序wx.request请求用POST后台得不到传递数据
微信小程序的wx.request请求,method设为POST并向后台传递数据,但从后台返回的信息来看后台并没有获得传递的数据 wx.request({ url: 'url' ...
- 分布式、服务化的ERP系统架构设计
ERP之痛 曾几何时,我混迹于电商.珠宝行业4年多,为这两个行业开发过两套大型业务系统(ERP).作为一个ERP系统,系统主要功能模块无非是订单管理.商品管理.生产采购.仓库管理.物流管理.财务管理等 ...
- 【RL-TCPnet网络教程】第37章 RL-TCPnet之FTP客户端
第37章 RL-TCPnet之FTP客户端 本章节为大家讲解RL-TCPnet的FTP客户端应用,学习本章节前,务必要优先学习第35章的FTP基础知识.有了这些基础知识之后,再搞本章节会有事 ...
- 【二代示波器教程】第13章 RTX操作系统版本二代示波器实现
第13章 RTX操作系统版本二代示波器实现 本章教程为大家讲解RTX操作系统版本的二代示波器实现.主要讲解RTOS设计框架,即各个任务实现的功能,任务间的通信方案选择,任务栈,系统栈以及全局 ...
- TensorFlow.org教程笔记(二) DataSets 快速入门
本文翻译自www.tensorflow.org的英文教程. tf.data 模块包含一组类,可以让你轻松加载数据,操作数据并将其输入到模型中.本文通过两个简单的例子来介绍这个API 从内存中的nump ...
- [Swift]LeetCode20. 有效的括号 | Valid Parentheses
Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...
- PHP-mysqli 出错回显
面向对象风格 <?php $conn = new mysqli("localhost", "username", "password" ...