javascript - 如何做出系统的IP地址输入框效果

Question

Windows系统的IP输入框，体验很好，输满了3位就可以自动到下一个焦点。
使用jquery做了一个类似的
http://jsfiddle.net/chromefans/3P5FU/
但是运行下就会发现其实体验并不是很好，因为如果我要编辑第二个框的第二个数字，会立刻触发keyup然后跳到下一个……有想过判断光标位置之类的，但是感觉不“优雅”…，求助有没有优雅的办法。

Answer 1

屏蔽掉keycode为8(退格)和46（delete）的keyup响应如何？这样删除字符就不会触发了

$('.rgb input').keyup(function (e) {
    var input = $('.rgb input');
    if ($(this).val().length == $(this).attr('maxlength')&&!(e.keyCode==8||e.keyCode==46)) {
        input.eq(input.index($(this)) + 1).focus();
    }

嗯 那就试试不要在在keyup马上验证 而是在keyup后延时0.1秒验证

$('.rgb input').keyup(function (e) {
    setTimeout(function(){
    if ($(this).val().length == $(this).attr('maxlength')&&!(e.keyCode==8||e.keyCode==46)) {
        input.eq(input.index($(this)) + 1).focus();
    }
},100);

Answer 2

有个 jQuery 插件，你可以试试 ：

http://mlntn.com/2009/12/30/jquery-ip-address-plugin/

这是 demo

http://mlntn.com/demos/jquery-ipaddress/

Answer 3

我的想法是，三个input，css去掉边框，每个input的maxlength设置成3，addEventListener监听keydown，if输入keydown&&输入框的value.length大于3，focus下一个input，如果backspace&&输入框的value.length==0，focus上一个input。
代码就不写了，方法可能有点笨，不过应该可以实现。