Как запретить ввод текста в поле ввода, проверка на ввод цифр.

Суть скриптов, которые мы рассмотрим дальше, в том, чтобы на лету ловить действия посетителя и запретить ему вводить что попало в определенное поле, кроме цифр. То есть, когда курсор будет сфокусирован на поле, при попытке нажать на клавиатуре на буквы, в поле ничего не будет происходить, в то же время можно вводить цифры и некоторые символы, такие как + - () и тд, то что может понадобится для поля номер телефона или другого цифрового.

Для работы такого скрипта Вам понадобится в первую очередь само поле для ввода номера. Например у Вас есть поле внутри формы которое выглядит примерно так:

<input id="#tel" type="tel" name="tel" placeholder="Введите здесь ваш номер" >

Первый скрипт использует - jQuery, поэтому в шапку Вашего сайта перед закрывающимся head или в подвал перед закрывающимсяbody нужно добавить подключение библиотеки jQuery. Если Вы это делали или это делает система управлением сайтом (движок сайта), то делать этого не нужно. Можете посмотреть исходный код сайта и если где-то есть похожая строчка, то значит этот шаг нужно пропустить. Если же подключения нет, то нужно добавить вот такую строку:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Теперь очередь самого скрипта. Его добавляем в отдельный файл и подключаем после библиотеки или же заключаем в теги:

<script type="text/javascript">
/// СЮДА КОД ...
</script>

Ну и собственно сам код:

jQuery(document).ready(function($){
$.fn.forceNumbericOnly = function() {
    return this.each(function()
    {
        $(this).keydown(function(e)
        {
            var key = e.charCode || e.keyCode || 0;
			return ( key == 8 || key == 9 || key == 46 ||(key >= 37 && key <= 40) ||(key >= 48 && key <= 57) ||(key >= 96 && key <= 105) || key == 107 || key == 109 || key == 173|| key == 61  ); });
    });
};
$('#tel').forceNumbericOnly();
});

Скрипт срабатывает на нажатие клавиш. В 8 строке задаются коды тех клавиш которые можно нажимать и значения которых появятся в поле ввода. Например, самый первый код - 8. Это код клавиши Backspace, то есть той что стирает написанное. Нужные коды можно посмотреть в таблице под статьей. В предпоследней строке указываем АЙДИ нужного поля ввода. В нашем случаи ID - #tel, в примере с полем ввода, это прекрасно видно.

Второй код выполнен в чистом javascript и немного отличается. Он разрешает вводить только цифры и backspace, enter, стрелочку назад, вперед. Конечно же Вы можете добавить новые коды для расширения возможностей. Айди нужного поля задается в первой строке. Ну и сам код собственно:

<script  type="text/javascript">
document.getElementById("tel").onkeypress= function(event){
 event= event || window.event;
 if (event.charCode && (event.charCode < 48 || event.charCode > 57))
  return false;
};
</script>

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

На этом все, спасибо за внимание. 🙂

Таблица виртуальных кодов клавиш для javascript, которую обещал выше.