Почему размер ввода не меняется, когда я меняю тип на, type="number"
но он работает type="text"
?
Email: <input type="text" name="email" size="10"><br/>
number: <input type="number" name="email" size="10">
Похоже, что input
тип number
не поддерживает size
атрибут или несовместим с браузерами, вы можете вместо этого установить его через CSS:
input[type=number]{
width: 80px;
}
maxlength="4"
и это не вступает в силу там, где оно естьtext
maxlength
не поддерживается, толькоmax
атрибут.input[type=number][size="3"]{ width: 3em; }
и т. Д.Неправильное использование.
Номер типа ввода имеет выбираемое значение с помощью стрелок вверх и вниз.
Итак, в основном вы ищете стиль CSS «ширины».
Входной текст исторически форматируется моноширинным шрифтом, поэтому размер - это также ширина, которую он занимает.
Число вводить новое и свойство "размер" вообще не имеет смысла *. Типичное использование:
<input type="number" name="quantity" min="1" max="5">
документы w3c
чтобы исправить, добавьте стиль:
<input type="number" name="email" style="width: 7em">
РЕДАКТИРОВАТЬ: если вам нужен диапазон, вы должны установить,
type="range"
а не="number"
EDIT2: * размер не является допустимым значением (так что смысла нет). Ознакомьтесь с официальными спецификациями W3C
источник
style='width:80'
большое спасибоВместо того, чтобы устанавливать длину, установите максимальное и минимальное значения для числового ввода.
Размер поля ввода изменится, чтобы соответствовать самому длинному допустимому значению.
Если вы хотите разрешить трехзначное число, установите 999 в качестве максимального
<input type="number" name="quantity" min="0" max="999">
источник
Для
<input type=number>
HTML5 CR этотsize
атрибут не разрешен. Однако в « Устаревших функциях» говорится: «Авторы не должны, но могут, несмотря на требования об обратном в других частях этой спецификации, указывать атрибуты maxlength и size для входных элементов, атрибуты типа которых находятся в состоянии Number. Одна веская причина для использования этих атрибутов независимо от того, чтобы помочь устаревшим пользовательским агентам, которые не поддерживают элементы ввода с type = "number", по-прежнему отображать текстовое поле с полезной шириной ».Таким образом,
size
атрибут может быть использован, но он затрагивает только старые браузеры , которые не поддерживаютtype=number
, так что элемент возвращается к простому текстовому элементу управления,<input type=text>
.Обоснование этого состоит в том, что браузер должен предоставлять пользовательский интерфейс, который учитывает другие атрибуты для удобства использования. Поскольку реализации могут отличаться, любой размер, наложенный автором, может испортить ситуацию. (Это также относится к настройке ширины элемента управления в CSS.)
Вывод состоит в том, что вы должны использовать
<input type=number>
более или менее плавную настройку, которая не делает никаких предположений о размерах элемента.источник
Вы хотите
maxlength
.Вы можете рассмотреть возможность использования одного из этих
input
типов.источник
Используйте событие onkeypress. Пример коробки с почтовым индексом. Он позволяет использовать максимум 5 символов и проверяет, вводятся ли только числа.
Конечно, ничто не сравнится с проверкой на стороне сервера, но это отличный способ.
function validInput(e) { e = (e) ? e : window.event; a = document.getElementById('zip-code'); cPress = (e.which) ? e.which : e.keyCode; if (cPress > 31 && (cPress < 48 || cPress > 57)) { return false; } else if (a.value.length >= 5) { return false; } return true; }
#zip-code { overflow: hidden; width: 60px; }
<label for="zip-code">Zip Code:</label> <input type="number" id="zip-code" name="zip-code" onkeypress="return validInput(event);" required="required">
источник
измените type = "number" на type = "tel"
источник