Поле ввода ограничение 0-100

У меня есть поле ввода, который принимает значения от 0-100. Я хочу, чтобы пользователи не писали ничего большего или меньшего.

Я использую плагин jQuery keyfilter для ограничения ввода поля: http://code.google.com/p/jquery-keyfilter/

этот плагин может ограничить ввод цифрами, но не в пределах диапазона. Как запретить пользователям вводить номера, которые будут превышать диапазон. Спасибо.

12
input javascript jquery keyfilter limit

7 ответов

используйте простой Javascript следующим образом:

<script>
  function handleChange(input) {
    if (input.value < 0) input.value = 0;
    if (input.value > 100) input.value = 100;
  }
</script>

затем объявите поле ввода следующим образом:

<input type="text" onchange="handleChange(this);" />

поскольку вы подключили эту функцию к onchange (), она будет работать, даже если пользователь копирует / вставляет что-то в поле ввода.

34

Я бы предложил использовать jQuery проверка плагин. Очень гибкий и расширяемый. Для обработки запроса range выполните следующее. Будет проверено, что любой вход в вашей форме, отмеченный классом "процент", присутствует и попадает в заданный диапазон.

$("#myform").validate({
  rules: {
    percentage: {
      required: true,
      range: [0, 100]
    }
  }
});

<input id="percent" name="percent" class="percentage" />

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

обновление: кроме того, вы можете рассмотреть альтернативный механизм ввода, такой как бегунок (демо), который будет ограничивать данные таким образом, что не подвержен ошибке пользователя-или, по крайней мере, не этот конкретный тип ошибки.

9

в HTML5 добавлено несколько новых типов ввода, включая number.

<form>
  Quantity (between 1 and 100):
  <input type="number" name="quantity" min="1" max="100">
</form>

новые типы ввода, которые не поддерживаются старыми веб-браузерами, будут вести себя как <input type="text">.

Runnable пример от W3Schools.

7

вы можете использовать математику.Макс и математика.мин

val = Math.min(100,Math.max(0,val));
4
<input type="text" id="test_id" />
<script>
document.getElementById("test_id").onkeyup=function(){
    var input=parseInt(this.value);
    if(input<0 || input>100)
    alert("Value should be between 0 - 100");
    return;
}    
</script>
2

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

например, если текущее значение равно 20, а пользователь пытается ввести третье число, вы должны отклонить клавишу, возвращая false из обработчика событий. В основном единственным третьим символом, который вы должны разрешить, является " 0 " и только если текущий поле Значение "10".

1

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

<input type="text" name="usrname" maxlength="20" />

Если вам нужно обработать некоторые другие случаи в поле ввода, то функция будет лучшим вариантом.

-2