Как сделать числовое поле на java script? Как сделать input числовым полем? Фильтр для input. Фильтр поля ввода. Далее представлен скрипт, который поможет отфильтровать данные, введенные в поле input. Наиболее характерный пример - сделать input числовым полем. Это совсем несложно. Говорят, что с появлением HTML 5 необходимость в таких кастылях-обработчиках пропадет. Что наконец-то будет удобно создавать поля ввода для телефона и электронной почты. Но когда это будет? Четкой информации о том, когда разработчики дошлифуют новые стандарты и запустят корабль в плавание нету. Тем временем, есть необходимость в фильтрации данных форм. Это удобно для пользователей. Можно конечно принять запрос обработать данные и "ругнуться" на пользователя после обработки данных на сервере, но зачем лишний раз делать это через сервер, если форму можно легко обработать на клиентской машине с помощью js и принять на сервер уже четкую, верно заполненную форму.  К тому же, в первом варианте пользователю, скорее всего, придется лишний раз ввести "капчу" или заново дважды заполнить пароль, а негатив для пользователя нам ни к чему.

Код числового поля input на java script

Первое, что нужно сделать - записать следующий java скрипт метод:
<script language="JavaScript">
function check(input) {     //метод, проверяющий значение поля input
   var resultint="";   //здесь сохранит итоговый результат
   var accept = "1234567890";   //допустимые символы, в данном случае числа
  
   for (var i = 0; i < input.length; i++) {   //проходим циклом по введенному в поле значению
  
   var symbol=""; //текущий символ
      //вложенный цикл, проверяем каждый символ поля на допустимость
      for (var j = 0; j < accept.length; j++){   
         if(input.charAt(i)==accept.charAt(j)) {    //если символ разрешен
            symbol=input.charAt(i);
            resultint+=symbol;   //добавляем его к resultint, таким образом, формируя его
         }
      }
   }
   alert(resultint);
}
</script>
Далее в нужной форме запишем следующую HTML разметку:
<form>
   ...   
   <p>Числовое поле:</p> 
   <input type="text" name="telephone" value="">
   <input type="button" value="Check" onClick="check(this.form.telephone.value);">
   ...
</form>
В данном примере, результат числового поля будет выведен через alert

Пример числового поля на java script

Фильтр поля input, допустимые символы: 1 2 3 4 5 6 7 8 9 0

Числовое поле:

Просто введите в поле любой текст и после события onblur (потеря фокуса)
Мне кажется, использование этого события наиболее удобно, тк пользователь видит изменения в числовом поле input
Для срабатывания скрипта на событие onblur я внес простые изменения:
<script language="JavaScript">
function check(input){
...
document.getElementById('telephone').value = resultint;
...
}
</script>

//Записал значение вместо вывода на экран ( alert(resultint); )
...
//Далее добавляем в поле input идентификатор и вешаем функцию на событие
<input name="telephone" id="telephone" onblur="check(this.form.telephone.value)" type="text" /> 

Вернуться в раздел: Блог