HTML ввод номера минимальный и максимальный не работает должным образом

у меня type=number поля ввода, и я поставил min и max значения для него:HTML ввод номера минимальный и максимальный не работает должным образом

<input type="number" min="0" max="23" value="14">

Когда я изменить время в визуализированном UI используя маленькие стрелки на правая сторона поля ввода, все работает правильно - я не могу идти выше 23 или ниже 0. Однако, когда я вводить цифры вручную (используя клавиатуру), ни одно из ограничений не действует.

Есть ли способ помешать кому-либо ввести любое количество, которое они хотят?

источник

2015-10-04 Tomas Dohnal

вы можете добиться рестрикции с помощью ehlp js/jquery. – johannesMatevosyan

Но всегда помните, вы не можете ограничить то, что будет отправлено обратно на ваш сервер. Входы всегда должны быть подтверждены на вашей стороне (также). – m02ph3u5

С помощью HTML5 max и min вы можете ограничивать значения только для ввода цифр. Но для этого нужно использовать JavaScript или jQuery. Одна из идей, у меня есть с помощью data- атрибуты и сохранить старое значение:

$(function() { 
 
    $("input").keydown(function() { 
 
    // Save old value. 
 
    $(this).data("old", $(this).val()); 
 
    }); 
 
    $("input").keyup(function() { 
 
    // Check correct, else revert back to old value. 
 
    if (parseInt($(this).val()) <= 23 && parseInt($(this).val()) >= 0) 
 
     ; 
 
    else 
 
     $(this).val($(this).data("old")); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input type="number" min="0" max="23" value="14" />

источник

2015-10-04 17:47:30

Могу поспорить, что я все еще могу быстро ввести номер вне диапазона и отправить его :) – Marek

У этого есть серьезные недостатки. Если вам нужно ввести «23», например, это не позволит вам, поскольку он требует каждого «keydown» и поэтому считает, что вы вводите только «2». Также вы можете удерживать один ключ до тех пор, пока вам нравится i.e. '5555555', потому что« keyup »не пойман. – joel2703

@ joel2703 Это двухгодичный пост, и как вы думаете, это еще больше добавит ценности? Если да, не стесняйтесь редактировать мой ответ и добавлять свои материалы. –

Может быть, вместо того, чтобы использовать тип «число» вы можете использовать тип «диапазон», который бы ограничивал пользователя от введите номер, потому что он использует панель слайдов, и если вы хотите настроить его для отображения текущего номера, просто используйте JavaScript

источник

2015-10-04 17:52:01

Хороший ... ': P' –

-1

Если вы все еще ищете ответ, вы можете использовать тип ввода = «номер».
мин макс работы, если она установлена в таком порядке:
1-имя
2-MaxLength
3-размер
4-мин
5-макс
просто скопировать его

<input name="X" maxlength="3" size="2" min="1" max="100" type="number" />

, когда вы вводите цифры/буквы вручную (используя клавиатуру), и отправляете небольшое сообщение, которое появляется в случае букв «пожалуйста, введите число» в случае номера из диапазона », пожалуйста, выберите значение, которое больше/меньше чем .. "

источник

2017-01-19 00:00:13

Это похоже на хорошее решение, однако я попытался в ответ' input' и получил ошибку. Затем проверили 'input' [documentation] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) и выяснили, что' maxlength' и 'size' не поддерживаются для '

Что? Означает ли порядок? Как это возможно? – Herbertusz

maxlength предназначен только для работы на type = "text" – Nick

В некоторых случаях pattern может использоваться вместо min и max. Он корректно работает с required.

источник

2017-04-12 16:22:22 user2061057

Спасибо, это мне помогает :) –

HTML ввод номера минимальный и максимальный не работает должным образом

ответ

Смежные вопросы