Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.99/377: Рейтинг темы: голосов - 377, средняя оценка - 4.99
zvezda_t
0 / 0 / 0
Регистрация: 16.12.2009
Сообщений: 31
1

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

27.12.2009, 14:32. Просмотров 72917. Ответов 25
Метки нет (Все метки)

Здравствуйте!
Есть стандартное поле ввода
HTML5
1
<input type='text' name='name1' size='30' maxlength='11'>
предназначенное для ввода стоимости товара, необходимо сделать так, чтоб пользователь не мог вводить в это поле никакие другие символы кроме цифр и точки(в случае если число дробное), причем важно чтоб это было именно блокировка ввода символов, а не чтоб после ввода выходило сообщение о неправильном формате ввода.

Кто с таким сталкивался, откликнетесь пожалуйста!
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
27.12.2009, 14:32
Ответы с готовыми решениями:

Запрет ввода букв в поле Edit
Написал следующий код, но он не дает запрета на ввод букв void __fastcall...

Нужно сделать поле ввода для ввода даты по шаблону
Нужно сделать поле ввода для ввода даты по шаблону ( __ . __ . ____ ). При воде нужно будет вводить...

Календарь для ввода в поле input
Здравствуйте, как сделать - ставим курсор в поле input появляются три календаря вертикально три...

Как сделать поле для ввода пароля
В Java есть jPasswordField вроде. В С# не нашёл похожего. Какие есть варианты?

25
Halva
24 / 24 / 2
Регистрация: 02.11.2008
Сообщений: 118
27.12.2009, 15:27 2
По поводу автоматического запрета, то тут на сколько я понимаю, всё равно необходима постоянная проверка. Для этого необходимо прибегнуть к 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);" />
Вот как-то так...
6
Dimedrol
2375 / 938 / 129
Регистрация: 25.04.2009
Сообщений: 2,635
Записей в блоге: 4
27.12.2009, 16:29 3
Halva правильно сказал, ещё можно onChange проверять с помощью Ajax.К php никакого отношения не имеет.
0
FunDuck
692 / 383 / 51
Регистрация: 22.01.2009
Сообщений: 1,135
27.12.2009, 16:51 4

Не по теме:

Цитата Сообщение от dimjan4 Посмотреть сообщение
ещё можно onChange проверять с помощью Ajax.К php никакого отношения не имеет.
Забавно:)


P.S. onChange обрабатывается, когда поле теряет фокус - не очень удобно для ввода.
0
Ex_Soft
107 / 107 / 15
Регистрация: 28.01.2009
Сообщений: 481
27.12.2009, 20:01 5
onkeyup

Цитата Сообщение от dimjan4 Посмотреть сообщение
с помощью Ajax
Опа... Ну-ка, ну-ка - просветите...
0
Dimedrol
2375 / 938 / 129
Регистрация: 25.04.2009
Сообщений: 2,635
Записей в блоге: 4
28.12.2009, 00:13 6
Получится тоже самое , что и у Halva, только сложней.
0
FunDuck
692 / 383 / 51
Регистрация: 22.01.2009
Сообщений: 1,135
28.12.2009, 00:41 7
Цитата Сообщение от dimjan4 Посмотреть сообщение
Получится тоже самое , что и у Halva, только сложней.
Можно подробнее?
0
motakuji
Программист
107 / 111 / 9
Регистрация: 27.09.2009
Сообщений: 331
29.12.2009, 01:59 8
Цитата Сообщение от dimjan4 Посмотреть сообщение
проверять с помощью Ajax.К php никакого отношения не имеет.
Для этого придётся писать серверную часть приложения. И я не понял на счёт PHP.Смысла не понял предложения... Можно и не его,а другой язык использовать.
0
zvezda_t
0 / 0 / 0
Регистрация: 16.12.2009
Сообщений: 31
07.02.2010, 18:41  [ТС] 9
Цитата Сообщение от 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);" />
Вот как-то так...
Подскажите пожалуйста, а как разрешить в поле ввода нажимать клавиши стрелочек(вперед, назад)?
0
Demetri
28 / 28 / 5
Регистрация: 18.01.2010
Сообщений: 73
01.12.2011, 13:24 10
Очень старая тема. Но, может кому-то пригодится.
На самом деле все делается ГОРАЗДО проще.
Элементу своему пишете на событие keydown

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

И нажатия всех нецифровых клавиш в этом поле просто игнорируются.
4
Vovan-VE
13183 / 6571 / 1039
Регистрация: 10.01.2008
Сообщений: 15,069
02.12.2011, 18:49 11
Цитата Сообщение от Demetri Посмотреть сообщение
И нажатия всех нецифровых клавиш в этом поле просто игнорируются.
Зато с помощью копипасты по-прежнему можно вставлять всё, что угодно.

А еще старее темы Вы не нашли?
0
a4rodita
10.09.2012, 15:44 12
Цитата Сообщение от Demetri Посмотреть сообщение
Очень старая тема. Но, может кому-то пригодится.
На самом деле все делается ГОРАЗДО проще.
Элементу своему пишете на событие keydown

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

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

Решение:

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

Реализацию описывать не буду. Там все просто.
0
newJS
Эксперт JSЭксперт HTML/CSS
2414 / 1094 / 308
Регистрация: 23.06.2011
Сообщений: 3,436
10.09.2012, 21:08 14
Цитата Сообщение от zvezda_t Посмотреть сообщение
причем важно чтоб это было именно блокировка ввода символов
Как таковой блокировки не получится, не получается перехватить, символ должен появиться в поле, только после этого его можно проверить и если надо удалить.
Если кто знает как перехватить символ кросбраузерно, поделитесь. Перехватить и не дать плохому символу появиться в поле!!! Клавишу то уже нажали, попробуйте скриптом отменить это нажатие.
zvezda_t, есть набор миниатюрных функций делающих все что нужно, ты это ищешь?


Цитата Сообщение от a4rodita Посмотреть сообщение
попробовала. возможно сделала что-то не так. но при попытке удалить, на клавиши backspace и del не реагирует также как и на буквы.
Все правильно, пропускает только цифры, и как сказал Vovan-VE, старьё с очень узкой специализацией.
Цитата Сообщение от Sarabanda Посмотреть сообщение
Реализацию описывать не буду. Там все просто.
А курсор где мигает?
0
Notortep
Заблокирован
11.09.2012, 07:09 15
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 миллисекунд, но это слишком "радикальное" лечение - тогда не видно будет реакции на одиночный ввод недопустимого символа

буду благодарен за любые предложения по более "мягкому" "лечению"
0
newJS
Эксперт JSЭксперт HTML/CSS
2414 / 1094 / 308
Регистрация: 23.06.2011
Сообщений: 3,436
11.09.2012, 21:09 16
1. пропускает только числа по маске [цифра(ы)][точка][цифра(ы)]
2. работает с любым вводом (клавиатурный, мышью, копи-паст)
3. работает с "залипшей" клавишей
4. показывает, что была попытка неверного ввода и оставляет предыдущее значение
5. код кроссбраузерный
это хорошо, плохо что пропускает любое количество точек и курсор всегда оказывается в конце текста.
0
Notortep
Заблокирован
11.09.2012, 23:27 17
newJS, люблю фантазёров, но не настолько

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

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

б) и это совершенно НЕ ПЛОХО, что в конце - пользователь внимательнее будет
0
newJS
Эксперт JSЭксперт HTML/CSS
2414 / 1094 / 308
Регистрация: 23.06.2011
Сообщений: 3,436
12.09.2012, 11:24 18
в каком браузере у вас "пропускаются" точки больше одной?
Тут у меня непонятка вышла.
б) и это совершенно НЕ ПЛОХО, что в конце - пользователь внимательнее будет
Не знаешь как вернуть курсор на место, так и скажи. Это непросто сделать.
можете предложить обоснованное место для курсора, когда идёт попытка вставки недопустимых символов методом копи-пасте?
Уже реализовал, и это место в конце вставки с учетом выброшенных плохих символов, как и положено после ввода символа или символов.
Единственный аргумент по поводу курсора, это то что не очень то и нужно, потому как в основном ввод последовательный, но где то может быть актуально.



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

P.S.
что то не хочет вставлять такую строку 78u89, и такую 78.89.0, правильную строку вставляет.
Лиса-15.0.1
0
Notortep
Заблокирован
12.09.2012, 17:36 19
newJS, значит, лишние точки всё же не пропускаются, как и требуется

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

смешно
0
prudkiy
181 / 149 / 55
Регистрация: 21.07.2013
Сообщений: 958
05.09.2015, 03:37 20
вот дописал, пропускает только цифры и точки
Javascript
1
var rep = /[-;":'a-zA-Zа-яА-Я\\=`ё/\*++!@#$%\^&_№?><]/;
0
05.09.2015, 03:37
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
05.09.2015, 03:37

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Как программно изменить цвет текста в поле ввода и как выделить весь текст в поле ввода по умолчанию
Как программно изменить цвет текста в поле ввода и как выделить весь текст в поле ввода по...

Сделать активным поле ввода текста input[type=text] в скрипте с интерактивным фоновым слоем
Здравствуйте. Нужна такая помощь: У меня на странице сайта имеется фоновая интерактивная заставка...

Как сделать поле для ввода прям в изображении
Есть скрипт (внизу в архиве). Как сделать что-бы поле для ввода было прям в изображении? Ребят...

Как сделать стандартное поле для ввода пароля ?
Здравствуйте! подкиньте пожалуйста парочку идей, как можно сделать стандартное поле для ввода...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.