31-解决方案

10.7.2　解决方案

在 <fieldset class="autotab"> 中寻找所有 <input> 元素。使用jQuery的.bind()方法监听 keydown 和 keyup 方法。在一些应该忽略的按键上退出绑定函数，因为它们对于自动前后切换输入字段没有意义。当 <input> 元素填满时，根据 maxlength 属性，用 .focus() 将焦点设置为下一个 <input> 元素。相反，当使用Backspace键时，如果 <input> 元素为空，用 .focus() 将焦点设置为上一个 <input> 元素：

$('fieldset.autotab input').bind('keydown keyup',function(event){
　　 //触发事件的键码
　　 var keyCode = event.which;
　　 //我们希望忽略如下按键:
　　 // 9 Tab, 16 Shift, 17 Ctrl, 18 Alt, 19 Pause Break, 20 Caps Lock
　　 // 27 Esc, 33 Page Up, 34 Page Down, 35 End, 36 Home
　　 // 37 Left Arrow, 38 Up Arrow, 39 Right Arrow, 40 Down Arrow
　　 // 45 Insert, 46 Forward Delete, 144 Num Lock, 145 Scroll Lock
　　 var ignoreKeyCodes =
',9,16,17,18,19,20,27,33,34,35,36,37,38,39,40,45,46,144,145,';
　　 if ( ignoreKeyCodes.indexOf(',' + keyCode + ',') > −1 ) { return; }
　　 //我们希望在keydown事件上忽略backspace,
　　 //仅让它完成自己的工作,而不改变焦点
　　 if ( keyCode == 8 && event.type == 'keydown' ) { return; }
　　 var $this = $(this);
　　 var currentLength = $this.val().length;
　　 var maximumLength = $this.attr('maxlength');
　　 //如果是backspace键而没有更多字符,返回
　　 if ( keyCode == 8 && currentLength == 0 ) {
　　　　　$this.prev().focus();
　　 }
　　 //如果已经填满了输入字段,转到下一个
　　 if ( currentLength == maximumLength ) {
　　　　　$this.next().focus();
　　 }
});