Запрет ввода числа в input

@ArmaTiK · Регистрация: 07.08.2014

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

Есть калькулятор с инпутами типа number с step=0.5. Шаг (0,5) запрещает ввод стрелочками чисел типа 7,78 или 4,11175649, но не запрещает их ввод вручную. Как запретить вводить все цифры кроме 5 в качестве первой цифры после запятой?
Спасибо!

@BANO · 21.10.2015, 18:53

ArmaTiK, вы объяснили очень не понятно, можете показать html?

@kalabuni · 21.10.2015, 19:51

ArmaTiK, пользователь может ввести в поле всё, что угодно -- в том числе не число, а любой набор символов, например, qwerty, причём как с клавиатуры, так и, например, мышкой способом копи-пасте

прямо запретить что-то вводить вы не можете
однако вы можете "поймать" момент окончания ввода -- событие onchange -- и по этому событию можете скриптом проверить установленную вами "правильность" введённого и каким-либо образом изменить введённое, в вашем случае, например, вы можете "округлить" введённое до ближайших .5 в большую или в меньшую сторону

кроме того, в моём браузере FF ввод неверный по типу данных (и также не соответствующий прописанному шагу) приводит к выделению границ поля красным - что покажет юзеру, что он сделал что-то не то
что в других браузерах - не знаю, смотреть лень, узнайте сами

@Vadim_Lasso · 21.10.2015, 20:08

Например так: http://jsfiddle.net/vadim_Lasso/ern42n0s/3/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>vadim_lasso</title>
    </head>
    <body>
        <form action="">
            <input type="text" value="0" class="count" name="count" />
            <input type="button" value="-" name="op-minus" />
            <input type="button" value="+" name="op-plus" />
        </form>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script language="javascript">
            $(function() {
                var multiplicity = 0.5;
                var inputCount = $('input[name="count"]');
                var inputOperations = $('input[name^="op"]');
                
                var mathItUp = {
                    '+': function (x, y) { return x + y; },
                    '-': function (x, y) { return x - y }
                };
                
                inputOperations.on('click', function() {
                    var countCurrent = inputCount.val();
                    var countUpdated = mathItUp[$(this).val()](parseFloat(countCurrent), multiplicity);
                    inputCount.val(countUpdated);
                });
                
                var cursorPosition = 0;
                inputCount.on('keyup', function() {
                    cursorPosition = $(this).getCursorPosition();
                    var code = event.keyCode || event.which;
                    if(code == 37 || code == 39)
                        return;
                    var countCurrent = inputCount.val();
                    if (/^\d+\.\d+$/.test(countCurrent.toString())) {
                        var countUpdated = Math.round(countCurrent / multiplicity) * multiplicity;
                        inputCount.val(countUpdated);
                    }
                    $(this).setCursorPosition(cursorPosition);        
                });
            });
 
            (function($) {
                $.fn.getCursorPosition = function() {
                    var input = this.get(0);
                    if (!input) return;
                    if ('selectionStart' in input) {
                        return input.selectionStart;
                    } else if (document.selection) {
                        input.focus();
                        var sel = document.selection.createRange();
                        var selLen = document.selection.createRange().text.length;
                        sel.moveStart('character', -input.value.length);
                        return sel.text.length - selLen;
                    }
                }
            })(jQuery);
 
            $.fn.setCursorPosition = function(pos) {
                this.each(function(index, elem) {
                    if (elem.setSelectionRange) {
                        elem.setSelectionRange(pos, pos);
                    } else if (elem.createTextRange) {
                        var range = elem.createTextRange();
                        range.collapse(true);
                        range.moveEnd('character', pos);
                        range.moveStart('character', pos);
                        range.select();
                    }
                });
                return this;
            };
        </script>
    </body>
</html>

@kalabuni · 21.10.2015, 20:14

LASSO, ваш код не решает поставленной задачи

введите, например, с клавиатуры, 6.3, а потом кликните на +, в поле появится 6.8, что не соответствует заданному условию (кратности .5)

а если ввести qwerty, то после нажатия на + вообще в поле появится (и зависнет) NaN

@Vadim_Lasso · 21.10.2015, 20:44

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

введите, например, с клавиатуры, 6.3, а потом кликните на +, в поле появится 6.8

А как у вас удалось ввести 6.3? Если оно сразу же заменяется на 6.5, что соответствует кратности .5

Буквы не учитывал, т.к. изначально автором речь шла только о цифрах:

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

Как запретить вводить все цифры кроме 5 в качестве первой цифры после запятой?

Вот обновленный вариант: http://jsfiddle.net/vadim_Lasso/ern42n0s/7/

@kalabuni · 21.10.2015, 20:57

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

А как у вас удалось ввести 6.3? Если оно сразу же заменяется на 6.5, что соответствует кратности .5

да просто
1) кликнул по полю, поместив в нём фокус
2) ввёл с клавиатуры 6.3, затем кликнул по пустому месту страницы -- никакой замены не произошло

и, кстати, в вашем новом варианте также просто вводятся любые дробные числа, а потом к ним прибавляются/отнимаются по .5

увы, но задача не решена

@BANO · 21.10.2015, 21:13

LASSO, кстати да, когда вводишь что-то изначально не правильное, то он дальше идёт по накатаной, и просто прибавляет .5, не делая проверки

Добавлено через 1 минуту
а ещё он спокойно глотает русские буквы))

Добавлено через 2 минуты
вот доработанная версия LASSO

@Vadim_Lasso · 21.10.2015, 21:17

Ладно, с русскими буквами косяк поправил http://jsfiddle.net/vadim_Lasso/ern42n0s/8/
Но никак не пойму, какая есть еще проблема с вводом чего-то "неправильного" и прибавления .5?
Вот на видео все прекрасно работает:

@kalabuni · 21.10.2015, 23:01

LASSO, увы, даже в полноэкранном режиме и используя встроенную электронную лупу, я не могу разобрать - что именно вы на своём видео делаете

@BANO · 21.10.2015, 23:26

kalabuni, показывает рабочий код

не работающий при chenge, то есть при потере фокуса
я ведь тот ещё тестер, я зажал кнопку(3), и убрал фокус

кстати в моей модификации этот промежуток исправлен

@ArmaTiK · 24.10.2015, 16:57 **[ТС]**

Самый подходящий вариант решения. Но мое знание js позволяет понять только (7,8 / 0,5).округление * 0,5 = 8.
Правильно ли я понимаю, что применить ваше решение к input type="number" нельзя и нужно писать свой инпут как это сделали вы?

@kalabuni · 24.10.2015, 18:28

ArmaTiK, держите мой вариант
только я полагаю строго необходимым обязательно уведомлять пользователя, что его ввод откорректирован или сброшен ("возвращён к изначальному значению")

если вы полагаете, что этого уведомления не не надо (т.е. что все прямо-таки обожают сюрпризы), то две строки с алертами (#8 и #17) можете удалить

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
function myFunc (inp)
{
var t = inp.value;
if (!t)
   {
   inp.value = inp.getAttribute ('start');
   alert ('значение инпута сброшено!');
   return;
   }
if (!isNaN (t))
   {
   var z = t / inp.step;
   if (z != parseInt (z))
      {
      inp.value = Math.round (z * inp.step);
      alert ('значение инпута откорректировано!');
      }
   }
}
 
</script>
<input type="number" value="1" start ="1" step=".5" onchange="myFunc (this)">

полюбоваться

@BANO · 26.10.2015, 21:28

Не по теме:

kalabuni, вас заблокировали???

о господи, что же вы опять сделали не так?

@Vadim_Lasso · 26.10.2015, 22:57

Не по теме:

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

о господи, что же вы опять сделали не так?

Может из-за последних ответов? :)

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

https://www.cyberforum.ru/post8235180.html

"цикл while (true) {} используют только больные на всю голову якобы "программисты""

https://www.cyberforum.ru/post8240569.html

"вам бы коров пасти, а не заниматься web-программированием"

https://www.cyberforum.ru/post8236783.html

имхо, отвечает грубовато, но по делу...

@BANO · 26.10.2015, 23:01

Не по теме:

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

имхо, отвечает грубовато, но по делу...

+1

только вот он как и все люди иногда ошибается, но суровый мужик
хоть и грубый, но у меня к нему какое-то уважение, не знаю, может он иногда за меня ругается на тс, может из-за того, что он меня "мягко" возвращает на землю, когда я начинаю реально улетать

@Vadim_Lasso · 26.10.2015, 23:24

Не по теме:

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

у меня к нему какое-то уважение, не знаю, может он иногда за меня ругается на тс, может из-за того, что он меня "мягко" возвращает на землю, когда я начинаю реально улетать

Вот вот! Такого же мнения:)
Печально, что заблокировали... надеюсь это временно?

@BANO · 27.10.2015, 00:56

Не по теме:

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

Новые блоги и статьи Все статьи Все блоги /
Установка 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/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@ArmaTiK 0 / 0 / 0 Регистрация: 07.08.2014 Сообщений: 4

	Запрет ввода числа в input 21.10.2015, 15:43. Показов 12453. Ответов 17 Метки нет (Все метки) Есть калькулятор с инпутами типа number с step=0.5. Шаг (0,5) запрещает ввод стрелочками чисел типа 7,78 или 4,11175649, но не запрещает их ввод вручную. Как запретить вводить все цифры кроме 5 в качестве первой цифры после запятой? Спасибо! 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	21.10.2015, 18:53
	ArmaTiK, вы объяснили очень не понятно, можете показать html? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	21.10.2015, 19:51
	ArmaTiK, пользователь может ввести в поле всё, что угодно -- в том числе не число, а любой набор символов, например, qwerty, причём как с клавиатуры, так и, например, мышкой способом копи-пасте прямо запретить что-то вводить вы не можете однако вы можете "поймать" момент окончания ввода -- событие onchange -- и по этому событию можете скриптом проверить установленную вами "правильность" введённого и каким-либо образом изменить введённое, в вашем случае, например, вы можете "округлить" введённое до ближайших .5 в большую или в меньшую сторону кроме того, в моём браузере FF ввод неверный по типу данных (и также не соответствующий прописанному шагу) приводит к выделению границ поля красным - что покажет юзеру, что он сделал что-то не то что в других браузерах - не знаю, смотреть лень, узнайте сами 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	21.10.2015, 20:14
	LASSO, ваш код не решает поставленной задачи введите, например, с клавиатуры, 6.3, а потом кликните на +, в поле появится 6.8, что не соответствует заданному условию (кратности .5) а если ввести qwerty, то после нажатия на + вообще в поле появится (и зависнет) NaN 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	21.10.2015, 21:13
	LASSO, кстати да, когда вводишь что-то изначально не правильное, то он дальше идёт по накатаной, и просто прибавляет .5, не делая проверки Добавлено через 1 минуту а ещё он спокойно глотает русские буквы)) Добавлено через 2 минуты вот доработанная версия LASSO 0

@Vadim_Lasso 433 / 352 / 259 Регистрация: 29.11.2011 Сообщений: 628
	21.10.2015, 21:17
	Сообщение было отмечено ArmaTiK как решение Решение Ладно, с русскими буквами косяк поправил http://jsfiddle.net/vadim_Lasso/ern42n0s/8/ Но никак не пойму, какая есть еще проблема с вводом чего-то "неправильного" и прибавления .5? Вот на видео все прекрасно работает: 2

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	21.10.2015, 23:01
	LASSO, увы, даже в полноэкранном режиме и используя встроенную электронную лупу, я не могу разобрать - что именно вы на своём видео делаете 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	21.10.2015, 23:26
	kalabuni, показывает рабочий код не работающий при chenge, то есть при потере фокуса я ведь тот ещё тестер, я зажал кнопку(3), и убрал фокус кстати в моей модификации этот промежуток исправлен 1

@ArmaTiK 0 / 0 / 0 Регистрация: 07.08.2014 Сообщений: 4
	24.10.2015, 16:57 [ТС]
	Самый подходящий вариант решения. Но мое знание js позволяет понять только (7,8 / 0,5).округление * 0,5 = 8. Правильно ли я понимаю, что применить ваше решение к input type="number" нельзя и нужно писать свой инпут как это сделали вы? 0

@BANO
	26.10.2015, 21:28
	Не по теме: kalabuni, вас заблокировали??? о господи, что же вы опять сделали не так? 0

@BANO
	27.10.2015, 00:56
	Не по теме: насколько мне известно, блокируют у нас временно, за нарушения правил, но у него несколько предупреждений было короче будем надеяться, что временно 0

Запрет ввода числа в input

Решение