首页 > 如何做出系统的IP地址输入框效果

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

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


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


有个 jQuery 插件,你可以试试 :

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

这是 demo

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


屏蔽掉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);
【热门文章】
【热门文章】