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

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

@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