Ограничить поле ввода до 0-100

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

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

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

Ответ 1

Используйте простой 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(), она будет работать, даже если пользователь копирует/вставляет что-то в поле ввода.

Ответ 2

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

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

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

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

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

Ответ 3

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

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

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

Пример запуска из W3Schools.

Ответ 4

вы можете использовать Math.max и Math.min

val = Math.min(100,Math.max(0,val));

Ответ 5

document.getElementById("test_id").onkeyup = function() {
  var input = parseInt(this.value);
  if (input < 0 || input > 100)
    console.log("Value should be between 0 - 100");
  return;
}

<input type="text" id="test_id" />

Ответ 6

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

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

Ответ 7

JQuery, чтобы сделать это

<input type="number" name="quantity">

если число не от 0 до 100, тогда пустое поле ввода

<script>
    $("input[name='quantity']").change(function() {
      number = $("input[name='quantity']").val()
       if( number <= 0 || number >= 100 ) {
           $("input[name='quantity']").val("");
           alert("0 - 100");
         }
       });
</script>

Ответ 8

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

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

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