Самый простой способ маскировать символы в HTML (5) ввод текста

есть ли у HTML5 какая-либо маскировка текстового поля или мне все еще нужно поймать onkeydown etc.?

jbabey прав- "маскировка", как при блокировке определенных незаконных символов, а не скрытие того, что набрано.

Лучший (как в самом простом и надежном) способ, который я нашел, - это ловушка onkeyup а затем просто запустите регулярное выражение replace по значению текстового поля, удалив любые незаконные символы.

это имеет несколько преимуществ:

  1. легко реализация (одна функция, две строки кода).
  2. это надежно и охватывает все случаи, о которых я думал.
  3. он не блокирует ключевые команды, такие как копировать/вставить, выбрать все или клавиши со стрелками.

но его основным недостатком является то, что он показывает типизированные символы перед их удалением, что делает его очень хакерским и непрофессиональным.

17
html html5 javascript masking

4 ответов

посмотрите новый типы ввода HTML5. Они инструктируют браузеры выполнять фильтрацию данных на стороне клиента, но реализация является неполной в разных браузерах. The pattern атрибут будет выполнять фильтрацию в стиле регулярных выражений, но, опять же, браузеры не полностью (или вообще) поддерживают его.

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

10

да, в соответствии с проектами HTML5 вы можете использовать pattern атрибут для указания разрешенного ввода с помощью регулярного выражения. Для некоторых типов данных можно использовать специальные поля ввода, такие как <input type=email>. Но эти особенности все еще широко не имеют поддержки или имеют качественно плохую поддержку.

5

  1. базовая проверка может быть выполнена путем выбора атрибут type входных элементов. Например: <input type="email" /> <input type="URL" /> <input type="number" />

  2. используя шаблон атрибут, как: <input type="text" pattern="[1-4]{5}" />

  3. требуются

5

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

<div class="col-sm-3 col-md-6 col-lg-4">
  <div class="form-group">
     <label for="addPhone">Phone Number *</label>
      <input id="addPhone" name="addPhone" type="text" class="form-control 
       required" data-mask="(999) 999-9999"placeholder>
    <span class="help-block">(999) 999-9999</span>
  </div>
</div>

 <!-- Input Mask -->
 <script src="js/plugins/jasny/jasny-bootstrap.min.js"></script>

enter image description here

подробнее о плагине http://www.jasny.net/bootstrap/javascript/#inputmask

2