允许在正则表达式中使用箭头键

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

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

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

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

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

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

Answer 2

你可以试试这个，它可能会解决你的问题。

  var regex = new RegExp("^[a-zA-Z0-9]+$");

  var charCode =(typeof event.which == "number") ?event.which:event.keyCode

  var key = String.fromCharCode(charCode);

  if (!(charCode == 8 || charCode == 0)) {

      if (!regex.test(key)) {
            event.preventDefault();
            return false;
        }
    }

Answer 3

keyDown事件的问题是您不能抑制文本字段中键的显示(在我的例子中只能显示字母数字)。您只能在keyPress事件中执行此操作。但是你不能在keyPress事件中获得导航键，你只能在KeyDown事件中跟踪它们。并且一些键$，%，具有与箭头键在按键事件中具有相同的e.which。这会导致我编写允许箭头键的逻辑，但将文本限制为Alpha数字。这是我想出来的代码。现在工作得很好。

    onKeyPress: function(e){
            var regex = new RegExp("^[a-zA-Z0-9\b ]+$");
            var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
            var allowedSpecialKeys = 'ArrowLeftArrowRightArrowUpArrowDownDelete';
            var key = e.key;

            /*IE doesn't fire events for arrow keys, Firefox does*/
            if(allowedSpecialKeys.indexOf(key)>-1){
                return true;
            }

            if (regex.test(str)) {
                return true;
            }

            e.preventDefault();
            e.stopPropagation();
            e.cancelBubble = true;
            return false;
    }