Как сделать запрет ввода букв в поле для ввода input

@zvezda_t · Регистрация: 16.12.2009

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Есть стандартное поле ввода

HTML5
1
<input type='text' name='name1' size='30' maxlength='11'>

предназначенное для ввода стоимости товара, необходимо сделать так, чтоб пользователь не мог вводить в это поле никакие другие символы кроме цифр и точки(в случае если число дробное), причем важно чтоб это было именно блокировка ввода символов, а не чтоб после ввода выходило сообщение о неправильном формате ввода.

Кто с таким сталкивался, откликнетесь пожалуйста!

@Halva · 27.12.2009, 15:27

По поводу автоматического запрета, то тут на сколько я понимаю, всё равно необходима постоянная проверка. Для этого необходимо прибегнуть к JAvaScript -у... К инпуту прикручиваем событие onkeyup или onkeypress и вызываем фукцию, которая в свою очередь и проверяет, является ли символ буквой или нет.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript"> 
function proverka(input) { 
    var value = input.value; 
    var rep = /[-\.;":'a-zA-Zа-яА-Я]/; 
    if (rep.test(value)) { 
        value = value.replace(rep, ''); 
        input.value = value; 
    } 
} 
</script> 
<input type="text" onkeyup="return proverka(this);" />

Вот как-то так...

@Dimedrol · 27.12.2009, 16:29

Halva правильно сказал, ещё можно onChange проверять с помощью Ajax.К php никакого отношения не имеет.

@FunDuck · 27.12.2009, 16:51

Не по теме:

Сообщение от dimjan4

ещё можно onChange проверять с помощью Ajax.К php никакого отношения не имеет.

Забавно:)

P.S. onChange обрабатывается, когда поле теряет фокус - не очень удобно для ввода.

@Ex_Soft · 27.12.2009, 20:01

onkeyup

Сообщение от dimjan4

с помощью Ajax

Опа... Ну-ка, ну-ка - просветите...

@Dimedrol · 28.12.2009, 00:13

Получится тоже самое , что и у Halva, только сложней.

@FunDuck · 28.12.2009, 00:41

Сообщение от dimjan4

Получится тоже самое , что и у Halva, только сложней.

Можно подробнее?

@motakuji · 29.12.2009, 01:59

Сообщение от dimjan4

проверять с помощью Ajax.К php никакого отношения не имеет.

Для этого придётся писать серверную часть приложения. И я не понял на счёт PHP.Смысла не понял предложения... Можно и не его,а другой язык использовать.

@zvezda_t · 07.02.2010, 18:41 **[ТС]**

Сообщение от Halva

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript"> 
function proverka(input) { 
    var value = input.value; 
    var rep = /[-\.;":'a-zA-Zа-яА-Я]/; 
    if (rep.test(value)) { 
        value = value.replace(rep, ''); 
        input.value = value; 
    } 
} 
</script> 
<input type="text" onkeyup="return proverka(this);" />

Вот как-то так...

Подскажите пожалуйста, а как разрешить в поле ввода нажимать клавиши стрелочек(вперед, назад)?

@Demetri · 01.12.2011, 13:24

Очень старая тема. Но, может кому-то пригодится.
На самом деле все делается ГОРАЗДО проще.
Элементу своему пишете на событие keydown

onkeydown = "javascript: return ((event.keyCode>47)&&(event.keyCode<58)) "

И нажатия всех нецифровых клавиш в этом поле просто игнорируются.

Vovan-VE · 02.12.2011, 18:49

Сообщение от Demetri

И нажатия всех нецифровых клавиш в этом поле просто игнорируются.

Зато с помощью копипасты по-прежнему можно вставлять всё, что угодно.

А еще старее темы Вы не нашли?

10.09.2012, 15:44

Сообщение от Demetri

Очень старая тема. Но, может кому-то пригодится.
На самом деле все делается ГОРАЗДО проще.
Элементу своему пишете на событие keydown

onkeydown = "javascript: return ((event.keyCode>47)&&(event.keyCode<58)) "

И нажатия всех нецифровых клавиш в этом поле просто игнорируются.

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

@Sarabanda · 10.09.2012, 15:55

У меня есть очень изящное решение. Придумала сама, но уверена, что сделала это не первая.
Дело в том что keyup и keypress мы обрабатываем только после того как символ введен и после этого его резко удаляем если надо. То есть если мы сделаем keydown и не отрывая палец подержим то символ будет в поле, только потом пропадет, при отпускании.
Вобщем это все лирика.

Решение:

Делаем два инпута: в один(невидимый) пишем , потом его парсим. В другой(видимый) выводим.

Реализацию описывать не буду. Там все просто.

@newJS · 10.09.2012, 21:08

Сообщение от zvezda_t

причем важно чтоб это было именно блокировка ввода символов

Как таковой блокировки не получится, не получается перехватить, символ должен появиться в поле, только после этого его можно проверить и если надо удалить.
Если кто знает как перехватить символ кросбраузерно, поделитесь. Перехватить и не дать плохому символу появиться в поле!!! Клавишу то уже нажали, попробуйте скриптом отменить это нажатие.
zvezda_t, есть набор миниатюрных функций делающих все что нужно, ты это ищешь?

Сообщение от a4rodita

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

Все правильно, пропускает только цифры, и как сказал Vovan-VE, старьё с очень узкой специализацией.

Сообщение от Sarabanda

Реализацию описывать не буду. Там все просто.

А курсор где мигает?

@Notortep · 11.09.2012, 07:09

1. пропускает только числа по маске [цифра(ы)][точка][цифра(ы)]
2. работает с любым вводом (клавиатурный, мышью, копи-паст)
3. работает с "залипшей" клавишей
4. показывает, что была попытка неверного ввода и оставляет предыдущее значение
5. код кроссбраузерный

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
function Ftest (obj)
{
if (this.ST) return; var ov = obj.value;
var ovrl = ov.replace (/\d*\.?\d*/, '').length; this.ST = true;
if (ovrl > 0) {obj.value = obj.lang; Fshowerror (obj); return}
obj.lang = obj.value; this.ST = null;
}
 
function Fshowerror (obj)
{
if (!this.OBJ)
   {this.OBJ = obj; obj.style.backgroundColor = 'pink'; this.TIM = setTimeout (Fshowerror, 50)}
else
   {this.OBJ.style.backgroundColor = ''; clearTimeout (this.TIM); this.ST = null; Ftest (this.OBJ); this.OBJ = null}
}
</script>
 
<input oninput="Ftest (this)"
       onpropertychange="if ('v' == '\v' && parseFloat (navigator.userAgent.split ('MSIE ') [1].split (';') [0]) <= 9) Ftest (this)">

есть только один нюанс - в браузерах MSIE v. от 5.00 до 8.хх при "залипшей" клавише иногда оставляет один недопустимый символ (но после ещё одного нажатия - убирает)

"вылечить" можно, уменьшив время тайм-аута до 15-20 миллисекунд, но это слишком "радикальное" лечение - тогда не видно будет реакции на одиночный ввод недопустимого символа

буду благодарен за любые предложения по более "мягкому" "лечению"

@newJS · 11.09.2012, 21:09

1. пропускает только числа по маске [цифра(ы)][точка][цифра(ы)]
2. работает с любым вводом (клавиатурный, мышью, копи-паст)
3. работает с "залипшей" клавишей
4. показывает, что была попытка неверного ввода и оставляет предыдущее значение
5. код кроссбраузерный

это хорошо, плохо что пропускает любое количество точек и курсор всегда оказывается в конце текста.

@Notortep · 11.09.2012, 23:27

newJS, люблю фантазёров, но не настолько

в каком браузере у вас "пропускаются" точки больше одной?

а) курсор ПО ОПРЕДЕЛЕНИЮ не может быть в ином месте, кроме как в конце
можете предложить обоснованное место для курсора, когда идёт попытка вставки недопустимых символов методом копи-пасте?
то-то и оно...

б) и это совершенно НЕ ПЛОХО, что в конце - пользователь внимательнее будет

@newJS · 12.09.2012, 11:24

в каком браузере у вас "пропускаются" точки больше одной?

Тут у меня непонятка вышла.

б) и это совершенно НЕ ПЛОХО, что в конце - пользователь внимательнее будет

Не знаешь как вернуть курсор на место, так и скажи. Это непросто сделать.

можете предложить обоснованное место для курсора, когда идёт попытка вставки недопустимых символов методом копи-пасте?

Уже реализовал, и это место в конце вставки с учетом выброшенных плохих символов, как и положено после ввода символа или символов.
Единственный аргумент по поводу курсора, это то что не очень то и нужно, потому как в основном ввод последовательный, но где то может быть актуально.

Notortep можешь не пениться, ты в списке игнорирования.

P.S.
что то не хочет вставлять такую строку 78u89, и такую 78.89.0, правильную строку вставляет.
Лиса-15.0.1

@Notortep · 12.09.2012, 17:36

newJS, значит, лишние точки всё же не пропускаются, как и требуется

то есть вы, мягко скажем, "пукнули в лужу" и в расстройстве, забрызгавшись, занесли меня в список игнорирования?

смешно

@prudkiy · 05.09.2015, 03:37

вот дописал, пропускает только цифры и точки

JavaScript
1
var rep = /[-;":'a-zA-Zа-яА-Я\\=`ё/\*++!@#$%\^&_№?><]/;

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@Dimedrol 2378 / 941 / 129 Регистрация: 25.04.2009 Сообщений: 2,635 Записей в блоге: 4
	27.12.2009, 16:29
	Halva правильно сказал, ещё можно onChange проверять с помощью Ajax.К php никакого отношения не имеет. 0

@Dimedrol 2378 / 941 / 129 Регистрация: 25.04.2009 Сообщений: 2,635 Записей в блоге: 4
	28.12.2009, 00:13
	Получится тоже самое , что и у Halva, только сложней. 0

@Demetri 28 / 28 / 5 Регистрация: 18.01.2010 Сообщений: 73
	01.12.2011, 13:24
	Очень старая тема. Но, может кому-то пригодится. На самом деле все делается ГОРАЗДО проще. Элементу своему пишете на событие keydown onkeydown = "javascript: return ((event.keyCode>47)&&(event.keyCode<58)) " И нажатия всех нецифровых клавиш в этом поле просто игнорируются. 4

@Sarabanda 0 / 0 / 0 Регистрация: 12.01.2011 Сообщений: 6
	10.09.2012, 15:55
	У меня есть очень изящное решение. Придумала сама, но уверена, что сделала это не первая. Дело в том что keyup и keypress мы обрабатываем только после того как символ введен и после этого его резко удаляем если надо. То есть если мы сделаем keydown и не отрывая палец подержим то символ будет в поле, только потом пропадет, при отпускании. Вобщем это все лирика. Решение: Делаем два инпута: в один(невидимый) пишем , потом его парсим. В другой(видимый) выводим. Реализацию описывать не буду. Там все просто. 0

@Notortep Заблокирован
	11.09.2012, 23:27
	newJS, люблю фантазёров, но не настолько в каком браузере у вас "пропускаются" точки больше одной? а) курсор ПО ОПРЕДЕЛЕНИЮ не может быть в ином месте, кроме как в конце можете предложить обоснованное место для курсора, когда идёт попытка вставки недопустимых символов методом копи-пасте? то-то и оно... б) и это совершенно НЕ ПЛОХО, что в конце - пользователь внимательнее будет 0

@Notortep Заблокирован
	12.09.2012, 17:36
	newJS, значит, лишние точки всё же не пропускаются, как и требуется то есть вы, мягко скажем, "пукнули в лужу" и в расстройстве, забрызгавшись, занесли меня в список игнорирования? смешно 0