如何使用 javascript 事件避免文本字段中的无效输入？

Question

我无法正确处理 input type="text" 中的某些事件。 我只需要一个过滤器来只接受 [^0-9] 字符。

我需要以下帮助：

• 不接受来自 Control + Paste 命令的任何内容。通过 Control+V（键盘）或右键单击鼠标 + 粘贴选项。

到目前为止我尝试了什么：

• keypress 事件我可以很好地处理来自键盘的任何输入。 （任何不在 [^0-9] 中的字符和 enter、backspace、home、end 等都将被忽略）。

• keyup 我奇怪地处理 Control + Paste（键盘）事件。 我粘贴了一些字符串，粘贴字符串后，我裁剪了所有非白名单字符。 PS： 但是这不适用于右键单击 + 粘贴（鼠标），

• onChange 垃圾字符串保持可见，直到用户模糊该字段。

我想要什么：

• 复制示例字符串“123.321.456-78”并粘贴“12332145678”或“abc!2¨#7”并粘贴“27”。

• 不要以任何可能的方式接受任何非白名单字符。 （即使使用 $('#field').val("trash input 123")。

从上述所有问题中，我可以很好地或奇怪地处理（又名：keuup）输入，但右键单击 + 粘贴（鼠标）永远不会触发任何事件，因此我可以进行适当的处​​理。

我想过做间隔检查，但这太丑了。

编辑：

代码如下

function soNumeroInteiro_keypressHandler(event)
{
    var code = event.keyCode || event.which;

    switch(code)
    {
        case  8: // backspace
        case 37: // left
        case 39: // right
        case  9: // tab
        case 46: // delete
        case 35: // end
        case 36: // home
            return true;
        break; 

        case  86: // control + A
        case  97: // control + V
        case 120: // control + X
            if (event.ctrlKey) {
                return true;                
            }
        break;
    }

    var tecla = String.fromCharCode(code);

    return tecla.match(/^\d$/) != null;
}

function soNumeroInteiro_keyupHandler(event)
{
    event.currentTarget.value = event.currentTarget.value.replace(/[^0-9]/g, '');
}

Answer 1

鼠标点击事件请看这个问题：How to distinguish between left and right mouse click with jQuery

现在您有了鼠标单击事件，即使是右键单击，您也可以轮询内容一小段时间（2 秒？）以检测更改并处理内容验证。这样，您可以根据业务逻辑需求选择接受有效或拒绝内容。

编辑： 只是要添加一个注释， onpaste 事件将无法正常工作，因为它会在粘贴内容之前触发（至少在某些测试用例中）。

例子：

$('#pasteyMe').on('paste', function() {
    $(this).val();// gets the content prior to the paste event
});

要解决这个问题，您可以设置另一个事件观察器，例如更改，然后触发它：

$('#pasteyMe').on('click focus blur paste', function() {
    var me = this;
    window.setTimeout(function() {
       $(me).trigger('change');
    }, 1);
});

$('#pasteyMe').change(function() {
    $('#resulty').text($(this).val());
});

在此处查看实际操作：http://jsfiddle.net/MarkSchultheiss/kQxAj/