Есть ли способ установить максимальное значение для ввода текста HTML?

Question

Есть ли способ установить максимальное значение для ввода текста HTML?

0

Я делаю программу, которая требует, чтобы пользователь вводил строку в поле ввода текста HTML, но она должна быть четырех символов. Есть ли способ установить максимальное значение для ввода? Также вы можете сделать так, чтобы это были только цифры? Вот что я имею в виду:

<html>
<head>

</head>
<body>
<h1>Please enter a four digit pin number:</h1>
<input type=text id=pin_number **maxvalue=4**>
/*Maybe you can do it with buttons*/
<table><tr><td><input type="button" value="1>"</td><td><input type="button" value="2>"</td>
<td><input type="button" value="3>"</td></tr><tr><td><input type="button" value="4>"</td><td><input type="button" value="5>"</td>
<td><input type="button" value="6>"</td></tr><tr><td><input type="button" value="7>"</td><td><input type="button" value="8>"</td>
<td><input type="button" value="9>"</td></tr></table>
</body>
</html>

cobo16 04 янв. 2014, в 16:43

Источник

0

dev.w3.org/html5/markup/input.number.html
hjpotter92 04 янв. 2014, в 15:42

Теги:

html

button

input

4 ответа

Ещё вопросы

Niels Keurentjes · Answer 1 · 2014-01-04T14-02-00.000Z

3

<input type="number" max="9999" min="0" required value="0">

Скрипт.

Niels Keurentjes 04 янв. 2014, в 14:02

0

Это решает проблему с номером, но вы все равно можете набрать любой номер.
cobo16 04 янв. 2014, в 15:46
1

Не все браузеры поддерживают его полностью. Для лучшего охвата всех браузеров вам понадобится Javascript.
Niels Keurentjes 04 янв. 2014, в 15:48
0

Проверьте обновленную Fiddle и попробуйте ввести PIN-код 12345 - он блокируется во время отправки браузером.
Niels Keurentjes 04 янв. 2014, в 15:51

Показать ещё 1 комментарий

Sergey Bogdanov · Answer 2 · 2014-03-02T10-13-00.000Z

Вот мой способ фильтровать цифры и проверять максимальное значение в текстовом поле.

Он работает в любом браузере

Функция JS:

function InputReplaceForInt(input, max) {
    if(max > 0 && input.value.length > max) {
        input.value = input.value.substr(0,max);
    }
    input.value = input.value.replace(/[^\d]/g, '');
}

Код HTML:

<input name="telephone"  type="text" onkeyup="InputReplaceForInt(this,11)"/>

bishop · Answer 3 · 2014-01-04T14-22-00.000Z

Другое решение, использующее атрибут шаблона HTML5:

<input type='text' pattern='\d\d\d\d' />

скрипка

Опять же, я предполагаю, что вы хотите ровно четыре цифры. И вы можете вводить все, что хотите, но при нажатии кнопки "Отправить"

Adlin Ling · Answer 4 · 2014-01-04T14-16-00.000Z

Используйте Javascript и регулярные выражения следующим образом:

<html>
<head>

<script language="javascript" type="text/javascript">

function pinnotify() {
    var notify = document.getElementById('notify');
    var numberRegex = new RegExp("^[0-9]+$");
    var text = document.getElementById("pin");

    if(numberRegex.test(text.value)){
            notify.innerHTML = '<a style="font-size:1em;">Looks good!</a>';
    }else{
            notify.innerHTML = '<a style="font-size:1em;">Please numbers only.</a>';
    }

    if(text.value.length > 4){
            text.value = text.value.substring(0,4);
    }


}

</script>


</head>
<body>


<h1>Please enter a four digit pin number:</h1>

<form method="post" action="">
<input type="text" name="pin" id="pin" size="32" onkeyup="return pinnotify();"> <span id="notify"></span><br/>
</form>
</body>
</html>