Разрешить клавиши со стрелками в регулярном выражении

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

Однако это не является хорошим решением, потому что это приведет к ужасным поведением (вы не сможете использовать сдвиг для метки, курсор будет перемещен в конец после того, как первый типизированное письмо в середине слова и т. д.)

Лучшим решением может быть «очистка» входного значения, скажем, 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

Пожалуйста, обратите внимание, что вам нужно добавить проверку на стороне сервера, а также (и, возможно, до отправки формы, так как пользователь может нажимать клавишу ввод для отправки формы до «чистки» ввод срабатывает).

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, что клавиши со стрелками имеют событие keypress. который вызывает проблемы для меня, чтобы написать логику, чтобы позволить клавиши со стрелками, но ограничивать текст только буквой 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; 
    }