Пользователи

1
NeuttySquique
NeuttySquique
Очков: 2
2
janeopwq
janeopwq
Очков: 0
3
toranboillobellPok
toranboillobellPok
Очков: 0
4
Игорь
Игорь
Очков: 0
5
Jarnakadisi
Jarnakadisi
Очков: 0
6
mosrap
mosrap
Очков: 0
7
Сергей
Сергей
Очков: 0

Форум вебмастеров

Мощный инструмент в решении вопросов сайтостроения. Вопросы по разработке сайтов, оптимизации и их продвижении.

  • Обсуждения
    Обсуждения
    Список всех обсуждений, которые созданы на этом сайте.
  • Теги
    Теги
    Посмотреть теги, которые созданы на этом сайте и фильтровать обсуждения по тегам.
  • Категории
    Категории
    Посмотреть категории, которые созданы на сайте, и фильтровать обсуждения по категориям
  • Пользователи
    Пользователи
    Посмотреть профили других пользователей на этом сайте
  • Значки
    Значки
    Просмотр списка достижимых значков на сайте

Как можно реализовать ввод данных в поле input только цифры?

0
Ребят, подскажите плиз, как можно на JS сделать ввод данных в поле <input> только цифр? Желательно с поддержкой jQuery (на сайте сейчас используется).
К примеру чтобы можно было набрать только номер телефона, а ввод букв был запрещен.

Заранее благодарю.
       
  •  
    Ответ от Administrator Среда, Апреля 09 2014, 07:53 · Скрыть · #1
    сделайте просто ввод данных на HTML5, т.е. добавьте к полю input, функцию pattern="\d*». В итоге при отправке сообщений, браузер сам проверит форму и выдаст человеку сообщение что он неправильно ввел данные. Вот пример сообщения:

    http://web-forsite.ru/images/1input.png

    Реализация (Вариант 1):
    HTML:
    <form>
      <input type="text" id="phone" class="input" placeholder="введите номер телефона цифрами. Пример: 4951111111" pattern="\d*" />
    <br />    
      <button type="submit" />Отправить</button>
    </form>

    Т.е. данные можно будет отправить только если он введет цифры в поле.

    Можете также сделать на JS, например выдать сообщение о том что нужно ввести цифры, при вводе букв. Выглядеть это будет вот так:

    http://web-forsite.ru/images/2input.png

    Реализация (Вариант 2):
    HTML:
    <form action="">
       <p>Введите любое число.</p>
       <p><input class="input" type="text" placeholder="введите номер телефона цифрами" name="num" onkeyup="validForm(this)"> 
       <br /><span id="msg">Вы ошиблись. Пожалуйста, введите телефон цифрами.</span></p>
       <button type="submit" />Отправить</button>
    </form>

    CSS:
    #msg {color: red; font-size: 12px; weight: bold; display: none;}

    JS:
    function validForm(f) {
        if (isDigit(f.value)) document.getElementById("msg").style.display = "none";
        else document.getElementById("msg").style.display = "inline";
       }
       function isDigit(data) {
        var numStr="0123456789";
        var k = 0;
        for (i=0;i<data.length;i++) {
          thisChar = data.substring(i, i+1);
          if (numStr.indexOf(thisChar) != -1) k++;
        }
        if (k == data.length) return 1;
        else return 0;
     }


    Также вы можете с помощью JS, вообще запретить любой ввод данных в поле кроме цифр (т.е. даже ctrl+v и пр.). В интернете масса решений. Просто выберите тот вариант который вам больше всего подходит и вставьте к себе на сайт. Самый простой и быстрый, это первый вариант на HTML5.
    Яркие решения для создания сайтов на CMS Joomla, Wordpress, Drupal....
Ваш ответ
Чтобы добавить комментарий, сначала авторизуйтесь, пожалуйста, на сайте