javascript - 在正则表达式中允许方向键

Question

我正在执行字母数字验证，现在我正在做的是用户只能输入字母数字值，并且也只能在粘贴时允许字母数字值。所以我使用了下面的正则表达式

function OnlyAlphaNumeric(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if ((charCode > 32 && charCode < 48) || (charCode > 57 && charCode < 65) ||    
                    (charCode > 90 && charCode < 97) || charCode > 122) {
    return false;
}
else {
    return true;
   }
}

为了防止复制和粘贴，

function CPOnlyAlphaNumeric(evt) {

     $(evt).val($(evt).val().replace(/[^A-Za-z0-9]/g, ' '))

}

这两个函数是从以下 onkeypress 和 onkeyup 方法调用的，如下所示

   @Html.TextBoxFor(model => model.ProductName, new { @class = "form-  
       control", @onkeypress = "return OnlyAlphaNumeric(this);", @onkeyup=   
        "return CPOnlyAlphaNumeric(this);" })

这适用于字母数字验证，但它不允许光标向左移动以编辑文本。那么我应该在我的正则表达式中做什么改变。

Answer 1

您的问题与正则表达式无关。

当您按下任意键(包括左/右箭头)时，您将获取输入值，替换所有禁用字符并设置输入值。当最后一个 Action 完成时，浏览器的 native 行为是将光标移动到输入的末尾。

您可以检查按下的键是什么以及它是否是左/右箭头以跳过对输入值的操作。

function CPOnlyAlphaNumeric(evt) { 
    var code = evt.which ? evt.which : event.keyCode;

    // 37 = left arrow, 39 = right arrow.
    if(code !== 37 && code !== 39)
        $(evt).val($(evt).val().replace(/[^A-Za-z0-9]/g, ' '))
}

Demo

但这不是一个好的解决方案，因为它会导致糟糕的行为(您将无法使用 shift 进行标记，光标将移动到单词中间第一个键入字母后的末尾等。 .)

更好的解决方案可能是在用户停止输入后“清理”输入值，比方说 500 毫秒。

var timeout = null;

function CPOnlyAlphaNumeric(evt) {
    if(timeout)
        clearTimeout(timeout);

    timeout = setTimeout(function(){ 
        $(evt).val($(evt).val().replace(/[^A-Za-z0-9]/g, ' '))
    }, 500);
}

Demo

请注意，您还需要在服务器端添加验证(可能在表单提交之前，因为用户可以在触发“清除”输入之前按回车键提交表单)。