Как сделать запрет ввода букв в поле для ввода 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а-яА-Я\\=`ё/\*++!@#$%\^&_№?><]/;

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@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