Проверяйте ввод текста html по мере его ввода

Question

Каков наилучший способ проверки ввода текста HTML при вводе?У всех способов, которые я знаю, есть некоторые недостатки:

1. При использовании $.keypress у вас есть доступ только к старому значению ввода, а не к новому.Кроме того, некоторые события (например, вырезание / вставка с помощью мыши) не будут обнаружены.

2. Использование $.change работает только тогда, когда ввод теряет фокус.

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

4. В этой статье предлагается использовать специфичные для браузера функции, когда они присутствуют, и вернуться к опросу, еслини один не доступен.Выглядит как лучший подход на данный момент.

5. [Update] , как указано в ответах, $.keyup дают доступ к значению после обновления.Тем не менее, он не только не работает для вырезания / вставки мышью, но и не работает, если вы нажимаете и удерживаете клавишу, только после того, как будет введено много.Или, если объединить keydown и keyup для сохранения / восстановления старого значения, оно ломается, если пользователь вводит слишком быстро.

Ни одно из приведенных выше решений не является безошибочным или действительнобезопасные кросс-браузеры.Есть ли лучшие решения, готовые к использованию или готовые?Кажется, это общая проблема, я пытался ответить на похожие вопросы в последнее время, но безуспешно, и мне также интересен ответ.

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

Answer 1

Вы можете использовать события input (FF) и propertychange (все остальные), чтобы перехватить все формы ввода, включая клавиатуру и вставку rmb cut.

http://jsfiddle.net/dFBzW/

$('input').bind('input propertychange', function() {
    $('#output').html($(this).val());
});

Answer 2

В мире jQuery обычно используют плагины для этих задач проверки.Плагины могут быть относительно просты в использовании, и их популярность обычно отражается в меньшем количестве ошибок, чем код, написанный с нуля.

Проверка ввода обычно разбивается на категории, включая:

1) Правильный формат ввода / Маска ввода.например, только AZ или, скажем, 10-значные числа.

2) Наличие контента в домене.Например, код аэропорта или почтовые индексы.

Для (1) вы можете использовать следующие относительно популярные плагины:

Плагин маскированного ввода Digital Bush дляJquery .Он имеет много опций для настройки, включая пробелы, например:

с сайта Digital Bush:

$("#phone").mask("(999) 999-9999");

autoNumeric от decorplanit.com .У них есть хорошая поддержка числовых, а также валют, округлений и т. Д.

адаптировано с сайта autoNumeric:

$('#amountPaid').autoNumeric({aSep: '.', aDec: ','}); // eg, 9.000,00

Для (2), вы можете использовать, например, автозаполнение пользовательского интерфейса jQuery в сочетании с данными о ресурсах сервера в формате, подобном JSON.Скорее всего, для этого потребуется пользовательский код для блокировки ввода, но вы все равно можете использовать плагины для основных функций и сосредоточиться на конкретной бизнес-логике, которую вы создаете.

Некоторые тексты выше адаптированы из двух ответов в другихсообщения здесь и здесь .

Answer 3

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

Если под словом «подтвердить» вы подразумеваете «вообще запретить ввод недопустимых символов», я считаю, что это плохая практика. Это сбивает с толку пользователей, которые, возможно, не обращают пристального внимания и, возможно, даже не глядя на поле во время ввода (например, если они вводят учетную запись или номера телефонов, которые читают с листа бумаги). Значение, которое фактически сохраняется / используется, может немного отличаться от значения, которое, как они думали, было введено.

Если под словом «подтвердить» вы подразумеваете «проверить текущее значение и привлечь внимание пользователя к любым проблемам», например, отобразив ошибку рядом с полем или изменив цвет фона, то нет проблем с использованием комбинации нескольких события, включая keyup, change, blur, paste, click:

$("field selector").on("keyup change blur paste cut click", function() { ... });

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

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

Answer 4

Вы пробовали oninput?

Пример HTML:

<input name="username" id="user_name" oninput="readvalue();">

JavaScript:

function readvalue() {
    var name = $('#user_name').val();
}

Answer 5

Просто для другого решения по предотвращению определенных символов, без JQuery ...

<input type="text" onkeypress="checkInput(event)" />

...

function checkInput(e)
{
    //only alpha-numeric characters
    var ok = /[A-Za-z0-9]/.test(String.fromCharCode(e.charCode));
    if (!ok)
        e.preventDefault();
}

Я не знаю, требует ли это новых версий вещей или работает только в некоторых браузерах. Пожалуйста, прокомментируйте.

Answer 6

Вот код

function validatephone(xxxxx) 
{
  var maintainplus = '';
  var numval = xxxxx.value
  if ( numval.charAt(0)=='+' )
  {
    var maintainplus = '';
  }
  curphonevar = numval.replace(/[\\A-Za-z!"£$%^&\-\)\(*+_={};:'@#~,.Š\/<>\" "\?|`¬\]\[]/g,'');
  xxxxx.value = maintainplus + curphonevar;
  var maintainplus = '';
  xxxxx.focus;
}

<input type="text" align="MIDDLE" size="30" maxlength="20" onkeyup="validatephone(this);" name="contact"/>

Answer 7

let that=this;

$(this.element).find("input").keypress(function(e) {
               let character = String.fromCharCode(e.keyCode);

               let newValue =  this.value.substring(0,this.selectionStart) + character + this.value.substring(this.selectionEnd, String(this.value).length);


               if (!that.isFormatValid(newValue, that.getdecimalPoints())) {
                     e.preventDefault();
                     e.stopPropagation();
                     return false;
              }

              return true;
        });


        $(this.element).find("input").bind({
              paste: function() {
                     let _this = this;

                     setTimeout( function() {
                           let decimals = that.getdecimalPoints();
                           if (!that.isFormatValid($(_this).val(), decimals)) {                        
                                         $(_this).val('');                        
                           }
                     }, 0);                                                                                                  
                  }
           });

Answer 8

Это также может быть полезно

$(".cssclass").live("input propertychange", function () {
    //Validate goes here
});