Подтвердить ввод текста в HTML-формате при вводе

Ответ 1

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

http://jsfiddle.net/dFBzW/

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

Ответ 2

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

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

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

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

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

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

Ответ 3

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

Валидация входа обычно разделяется на категории, в том числе:

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

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

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

Цифровой входной плагин с подключенным вставкой для JQuery. В нем есть много вариантов настройки, включая пробелы, например:

с сайта Digital Bush:

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

autoNumeric from decorplanit.com. Они имеют хорошую поддержку для числовых, а также валюты, округления и т.д.

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

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

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

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

Ответ 4

Вот код

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"/>

Ответ 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();
}

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

Ответ 6

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

Пример HTML:

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

JavaScript:

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

Ответ 7

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

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

Ответ 8

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