使用jquery输入文本字段过滤会导致游标在IE和Chrome中跳转

时间:2011-08-15 06:02:33

标签: jquery input cursor-position

我在输入文本字段中过滤输入,例如:

我正在过滤输入,比如删除非数字字符。

$("#txtlevel").bind('keyup', function(evt)
{
    var value = $(this).val();
    value = value.replace(/\D/g, '');   /* Remove any non-digit characters */
    if ( value.length > 1 )
    {
        value = value.replace(/^[ 0]/g,'');   /* Remove any leading spaces or zeros */
    }
    $(this).val(value);
}

这在Firefox中运行良好,但在IE和Chrome中,光标每次都会跳转到输入字段的末尾。如何防止这种情况或重置光标位置?我已经看到代码用于文本字段而不是输入文本字段。

2 个答案:

答案 0 :(得分:3)

当您使用keyup并进行正则表达式替换(换句话说,设置value)时,光标将跳转到结尾。如果您的目标是仅允许数字键(加上退格键,删除键),请尝试以下操作:

$("#txtlevel").bind('keydown', function(event) {
    // Allow only backspace, delete, left and right arrows, return and tab
    if (event.keyCode == 46 || 
        event.keyCode == 8 || 
        event.keyCode == 37 || 
        event.keyCode == 39 || 
        event.keyCode == 13 || 
        event.keyCode == 9) {
        // let it happen
    }
    else {
        // stop the keypress if not a number
        if (event.keyCode < 48 || event.keyCode > 57 ) {
            event.preventDefault(); 
        }   
    }
});

要在粘贴时取消非数字事件,请将其绑定到paste事件:

$("#txtlevel").bind('paste', function(e){ 
    var value = $(this).val();
    value = value.replace(/\D/g, '');   /* Remove any non-digit characters */
    if ( value.length > 1 ) {
        value = value.replace(/^[ 0]/g,'');   /* Remove any leading spaces or zeros */
    }
    $(this).val(value);
});

答案 1 :(得分:0)

您可以保存并恢复光标位置。这样光标就不会跳到文本的末尾

$("#txtlevel").bind('keyup', function(evt)
{
    var pos = evt.target.selectionStart; // Save cursor position
    var value = $(this).val();
    value = value.replace(/\D/g, '');   /* Remove any non-digit characters */
    if ( value.length > 1 )
    {
        value = value.replace(/^[ 0]/g,'');   /* Remove any leading spaces or zeros */
    }
    $(this).val(value);
    evt.target.selectionEnd = pos; // Restore cursor position
}