文本框删除或者填写自动跳到下一个并获取焦点

Html

Css

Js

    
    
    .
    
    
    %

.inp > input { width: 50px; height: 50px; font-size: 40px; text-align: center; } .inp span { font-size: 40px; }

$(document).ready(function () { $('.inp>input').keypress(function (event) { if (event.keyCode != 8) { var num = $(this).attr('class').substr(-1) num = parseInt(num) + 1 $('.put' + num).focus() } }) $('.inp>input').keyup(function (event) { if (event.keyCode == 8) { var num = $('.inp>input:focus').attr('class').substr(-1) num = parseInt(num) - 1 $('.put' + num).focus() } }) })

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.9.0

上面的代码实现了我们的要求，下面介绍一下它的实现过程。

代码注释：

（1）.$(document).ready(function () {})，当文档结构完全加载完毕再去执行函数中的代码。

（2）.$('.inp>input').keypress(function (event) {})，为input元素注册keypress事件处理函数。

（3）.var num = $(this).attr('class').substring(3)，获取input元素class属性值最后一个数字字符。

（4）.num = parseInt(num) + 1，数字加1，也就是下一个input元素的class属性值最后一个数字值。

（5）.$('.put' + num).focus()，下一个input元素获取焦点。

上面介绍的是填写的时候能够实现下一个元素自动获取焦点，后面的代码实现的是删除的时候，上一个元素自动获取焦点，原理是一样的，更多的内容可以参阅相关阅读，或者留言。