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

时间:2015-02-13 12:54:42

标签: javascript jquery regex razor onkeyup

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

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);" })

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

3 个答案:

答案 0 :(得分:3)

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

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

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

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作为标记,光标将在单词中间的第一个输入字母后移动到最后等。)

更好的解决方案是清洁&#39;用户停止输入后,输入值为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

请注意,您还需要在服务器端添加验证(也可能在表单提交之前添加验证,因为用户可以在触发&#39;清除输入之前按Enter键提交表单)。

答案 1 :(得分: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;
        }
    }

答案 2 :(得分:1)

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;
    }