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

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

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

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

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

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

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

Ответы

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

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

  • обязательный атрибут  <input type="text" required />

  • MaxLength: <input type="text" maxlength="20" />

  • min и max: <input type="number" min="1" max="4" />

Ответ 4

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

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

введите описание изображения здесь

Дополнительная информация о плагине http://www.jasny.net/bootstrap/javascript/#inputmask