Блог

Главная - Вопросы по программированию - Как ограничить ввод чисел в текстовом поле от 1 до 9 с помощью javascript

Как ограничить ввод чисел в текстовом поле от 1 до 9 с помощью javascript

#javascript #html

#javascript #HTML

Вопрос:

здравствуйте, я пытаюсь реализовать текстовое поле для сбора 4-символьных pin-кодов от 1 до 9

Мне удалось добиться ограничения ввода 4 символами и только цифрами

но у меня возникают проблемы, ограничивающие использование «0» в этом текстовом поле

пожалуйста, помогите

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

 <input id="pin"  required name="pin"  oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "4" min="1" max="4"  placeholder="Pin Code">

Комментарии:

1. В чем проблема, с которой вы сталкиваетесь с нулями? Я могу представить себе несколько возможностей, но это пустая трата времени, когда вы можете просто рассказать нам.

2. вы хотите вводить только числа от 1 до 9?

Ответ №1:

 <input id="pin"
       required
       name="pin"
       type="text" 
       maxlength="4" 
       onkeypress='return event.charCode >= 49 amp;amp; event.charCode <= 57'    
       placeholder="Pin Code"
/>

@chap man просто используйте этот код, и все готово. Он просто проверяет, находится ли код ASCII входного символа в диапазоне [49,57], который является диапазоном кодов ASCII для чисел от 1 до 9

Ответ №2:

Это пример использования регулярных выражений

HTML

 <input id="pin" name="pin" placeholder="Pin Code">

jQuery

 $('#pin').on('input', function(){
    var thisRegex = new RegExp("^[1-4]{4}$"); 

if(!thisRegex.test($(this).val()))
  {
      alert('fail');
  }
  else
      alert('Good');
    
})

Ответ №3:

См. Изменение значения границы green , когда значение имеет длину 4 цифры. Оператор if проверяет регулярным выражением только значения от 1 до 9 и длиной в 4 цифры.

 var pinInputElement = document.querySelector('#pin');

pinInputElement.addEventListener('input', function(){

    if(/^[1-9]{4}$/.exec(this.value)) {
        this.classList.add('success');
    } else {
        this.classList.remove('success');
    }
}); 
 #pin {
    width: 100px;
    border-width: 5px;
    border-color: orange;
}

#pin.success {
    border-color: green;
} 
 <input id="pin"  required name="pin" type="number"
    maxlength="4" min="1" max="4"  placeholder="Pin Code">

Ответ №4:

Вы также можете использовать replaceAll() для замены всех нулей пустой строкой.

Вот мой полный рабочий пример:

 <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        function checkPin() {
            let pinInput = document.getElementById("pin");
            let value = pin.value;
            let maxLength = pin.maxLength;

            pinInput.value = value.replaceAll("0", "");

            if (value.length > maxLength) {
                pinInput.value = value.slice(0, maxLength);
            }
        }
    </script>
</head>
<body>
    <input id="pin"  required name="pin"  oninput="checkPin()"
        type = "number"
        maxlength = "4" min="1" max="4"  placeholder="Pin Code">
</body>
</html>