1

Хочу запретить ввод символов не соответствующих регулярному выражению:

/^[а-яА-Яa-zA-Z0-9]+$/

Т. е. сразу удалять недопустимые символы:

$(document).on('keyup','.searchsport',function(){

});
6
  • Знак каретки не должен стоять внутри квадратных скобок?
    – c4pQ
    17 авг 2016 в 11:40
  • @user1056837, нет, не должен
    – Grundy
    17 авг 2016 в 11:45
  • посмотри лучше в сторону атрибута pattern, а не яваскрипта
    – Grundy
    17 авг 2016 в 11:50
  • @Grundy, если память мне не изменяет, то вводить можно что угодно, валидация произойдёт только при отправке, что весьма не гуд.
    – user207618
    17 авг 2016 в 12:00
  • @Other, в принципе валидация сразу срабатывает, и если не ошибаюсь в css даже можно стиль invalid прописать. Но да, ввод в данном случае может и не отменять, зависит от реализации в браузере
    – Grundy
    17 авг 2016 в 12:01

2 ответа 2

1

Сохранять текущее значение input'а, считая его заведомо правильным. По событию изменения (HTML5 событие input) - будь то ввод с клавиатуры или copy-paste, новое содержание input'а проверяется на наличие символов помимо разрешённых.

Если нелегальные символы найдены – ставим предыдущее, законное значение input'а. А если всё в порядке – запоминаем поступившее новое правильное значение.

var input = document.getElementById('in-txt')
  ,value = input.value;

input.addEventListener('input', onInput);

function onInput(e){
  var newValue = e.target.value;
  if( newValue.match(/[^a-zA-Zа-яА-Я0-9]/g)) {
     input.value = value;
     return;
  }
  value = newValue;
}
<input type="text" id="in-txt">

Отдельно рассмотрите вариант, когда в поле copy-paste'ом вставляют сразу много букв. В предложенном коде всё будет отвергнуто, будто ничего и не вставляли. Возможно, вы захотите поступить иначе: отфильтровать все незаконные символы и вставить оставшиеся.

При вводе нелегального символа в середину строки курсор переедет в конец строки, а выделение текста, если было, сбросится. Можно и этот момент обработать, но это уже за рамками данного вопроса.

0

Обновил ответ.

Добавил обработку вставки, нажатие запрещенных клавиш не переводит каретку в конец строки. Нажатие клавиш стрелок, tab, home, end не игнорируются. Проверил в хроме, возможно потребуются изменения для других браузеров.

Если найдете проблему, напишите, постараюсь исправить. Ссылка на jsfiddle

var allowedRegex = /^[а-яА-Яa-zA-Z0-9]+$/;
var allowedCharRegex = /[а-яА-Яa-zA-Z0-9]/;

$('input').on('paste', function (e) {
    // handle only copy paste here
    // get clipboard text
    var newValue = e.originalEvent.clipboardData.getData('Text');

    // if new value is incorrect then stop event
    if (!allowedRegex.test(newValue)) {
        e.stopPropagation();
        return false;
    }
});

$('input').keypress(function(e) {
    // check input character
    return allowedCharRegex.test(e.key);
});
3
  • отвратительный пример: попробуй стрелочками переместить курсор хотя бы на одну позицию влево, ну и для регулярки в данном случае вместо функции вторым параметром понятнее использовать просто пустую строку .replace(/[^a-zA-Z0-9]/g,'')
    – Grundy
    17 авг 2016 в 11:59
  • Вопрос был как запретить вводить символы, про остальную логику не спрашивали
    – Andrew B
    17 авг 2016 в 12:01
  • ну и еще стоит добавить, что при вводе символа в любое место - курсор будет передвинут в конец
    – Grundy
    17 авг 2016 в 12:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.