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

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

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

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

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

It's easy to implement (one function, two lines of code). It's reliable and covers all cases I've thought of. It doesn't block key commands like copy/paste, select all or arrow keys.

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

 thecoolmacdude01 сент. 2017 г., 23:09
Нужно еще сделать по улицам (см.stackoverflow.com/questions/15728261/…), если вы не хотите использовать регулярную фильтрацию в стиле, как описано ниже.
 Zuul04 июн. 2012 г., 22:10
Почему нетinput изtype="password" ?
 jbabey04 июн. 2012 г., 22:14
я думаю, что он имеет в видуmaskнеmask
 Heitor Chang04 июн. 2012 г., 22:13
Вопрос, вероятно, означает, что в текстовом поле могут появляться только определенные символы, например цифры и (-) для телефонных входов.

Ответы на вопрос(4)

Решение Вопроса

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

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

 01 сент. 2017 г., 23:01
Чтобы улучшить ответ, следует привести пример отлова на свидании.

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

<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

Basic validation can be performed by choosing the type attribute of input elements. For example: <input type="email" /> <input type="URL" /> <input type="number" />

using pattern attribute like: <input type="text" pattern="[1-4]{5}" />

required attribute <input type="text" required />

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

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

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

 devios104 июн. 2012 г., 22:23
Ах, здорово! Это именно то, на что я надеялся. Мои поиски в Google ничего не показали. К сожалению, он пока еще не получил широкого распространения.
 devios104 июн. 2012 г., 22:43
К сожалению, спецификация только определяет, когда элемент страдает от несоответствия шаблона, а не то, как браузер должен его обрабатывать. В идеале это будет блокировать ввод данных, но это может привести к красной границе или чему-то глупому.
 04 июн. 2012 г., 22:36
@chaiguy, Theattr-input-pattern отW3C Working Draft 29 March 2012 !

Ваш ответ на вопрос