Захватить * все * отображаемые символы в JavaScript?

Question

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

У меня есть текстовое поле, которое имеет maxlength из 10 символов.Когда пользователь пытается набрать более 10 символов, мне нужно уведомить пользователя о том, что он печатает за пределами допустимого числа символов.

Самое простое решение - указать maxlength из11, проверьте длину на каждом keyup и обрежьте до 10 символов, но это решение кажется немного глупым.Что я предпочел бы сделать, так это захватить символ перед keyup и, в зависимости от того, является ли он отображаемым символом, представить уведомление пользователю и предотвратить действие по умолчанию.

Белый список будет сложным, поскольку мы обрабатываем много международных данных.

Я играл с каждой комбинацией нажатие клавиши , нажатие клавиши и keyup , чтение event.keyCode , event.charCode и event.which , но я не могу найти ни одной комбинации, которая работаетво всех браузерах.Лучшее, что я мог бы сделать, это следующее, что работает правильно в> = IE6, Chrome5, FF3.6, но не работает в Opera:

NOTE : В следующем коде используется jQuery.

$(function(){
  $('#textbox').keypress(function(e){
    var $this = $(this);
    var key = ('undefined'==typeof e.which?e.keyCode:e.which);
    if ($this.val().length==($this.attr('maxlength')||10)) {
      switch(key){
        case 13: //return
        case 9:  //tab
        case 27: //escape
        case 8:  //backspace
        case 0:  //other non-alphanumeric
          break;
        default:
          alert('no - '+e.charCode+' - '+e.which+' - '+e.keyCode);
          return false;
      };
    }
  });
});

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

Answer 1

Самое простое решение - указать максимальную длину 11, проверить длину каждого ключевого слова и укоротить до 10 символов, но это решение выглядит немного глупо.

Этотакже легко победить при вырезании / вставке, перетаскивании, щелчке правой кнопкой мыши, отмене / повторении и т. д. Не существует надежного способа получить каждый потенциальный бит ввода, кроме опроса.

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

<input id="x" maxlength="10"/>
<div id="x-warning" style="display: none;">can't type any more!</div>
<script type="text/javascript">
    function LengthMonitor(element, warning) {
        element.onkeypress= function(event) {
            if (event===undefined) event= window.event;
            var code= 'charCode' in event? event.charCode : 'which' in event? event.which : event.keyCode;
            var full= element.value.length===element.maxLength;
            var typed= !(code<32 || event.ctrlKey || event.altKey || event.metaKey);
            warning.style.display= (full & typed)? 'block' : 'none';
        };
        element.onblur= function() {
            warning.style.display= 'none';
        };
    }

    LengthMonitor(document.getElementById('x'), document.getElementById('x-warning'));
</script>

Answer 2

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

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

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

Answer 3

В веб-приложении, над которым я работаю, возникла смутно похожая ситуация, когда мне нужно было оставить отзыв пользователю, в реальном времени, когда он вводил данные во вход.

Честно говоря, лучшее решение, которое я придумал, было просто использовать setTimeout для периодического опроса поля ввода. Я провел несколько тестов, чтобы найти хороший баланс между отзывчивостью и эффективностью (я думаю, ~ 400 мс).

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

Это не так элегантно, как хотелось бы, но работает.

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

Это не будет заменой для другой проверки курса.

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

Answer 4

Поскольку вы уже используете JQuery, .validate() потрясающе для форм.Просто установите правило максимальной длины для вашего поля, и все готово.Например,

$("form[name='myform']").validate({
    rules: {
        myfield: {required:true, maxlength:10}
    }
});