Запретить Буквы в числовом поле в html5

Я хочу запретить пользователю вводить нечисловые символы в текстовое поле для номера телефона в HTML5. Я пробовал это, но это не запрещает нечисловые символы:

<input type="tel"  name="usrtel"><br>

Я попытался с помощью type=number также, но это дает мне стрелку вверх и вниз, чтобы увеличить или уменьшить значение, что не полезно для телефонных номеров. Как я могу это сделать?

6
forms html html5 input

1 ответов

можно использовать pattern атрибут с регулярным выражением \d*

<input type="tel" name="usrtel" pattern="\d*" />

демо (после ввода в поле просто нажмите в любом месте вне поля, если вы введете что-нибудь, кроме целых чисел, он покажет Красное поле, иначе он останется нормальным)

демо 2 (с пользовательским сообщением и кнопкой отправки)

как вы прокомментировали, вы можете изменить свой pattern значение ^[0-9]{3,45}$ где пользователь должен будет ввести минимум 3 цифры до максимума 45 в длину.

демо

<input 
      type="tel" 
      name="usrtel" 
      pattern="^[0-9]{3,45}$" 
      title="You can only enter numbers, with a minimal of 3 characters 
      upto 45 characters are accepted."
      required="required" 
/>

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

5