Тип ввода HTML "число" не будет изменяться

Ответ 1

Похоже, что тип input number не поддерживает атрибут size или он не совместим с браузерами, вы можете установить его через CSS:

input[type=number]{
    width: 80px;
} 

Обновлено Fiddle

Ответ 2

Неправильное использование.

Введите тип номера, который он сделал, чтобы выбрать значение по стрелкам вверх и вниз.

Итак, вы ищете стиль CSS "width".

Текст ввода исторически отформатирован моноширинным шрифтом, поэтому его размер также равен ширине.

Введите номер нового и свойство "размер" вообще не имеет смысла *. Типичное использование:

<input type="number" name="quantity" min="1" max="5">

w3c docs

чтобы исправить, добавьте стиль:

<input type="number" name="email" style="width: 7em">

EDIT: если вам нужен диапазон, вы должны установить type="range", а не ="number"

EDIT2: * размер не является допустимым значением (поэтому, нет смысла). Ознакомьтесь с официальным Спецификации W3C

Примечание. Атрибут размера работает со следующими типами ввода: текст, поиск, tel, url, email и пароль.

Совет. Чтобы указать максимальное количество символов, разрешенных в  , используйте атрибут maxlength.

Ответ 3

Для <input type=number>, с помощью HTML5 CR, атрибут size не разрешен. Однако в Устаревшие функции в нем говорится: "Авторы не должны, но могут, несмотря на требования к противоположному в другом месте этой спецификации, указать атрибуты maxlength и size на элементах ввода, чьи атрибуты типа находятся в состоянии" Число ". Одна из веских причин использования этих атрибутов вне зависимости от того, чтобы помочь устаревшим пользовательским агентам, которые не поддерживают входные элементы с типом =" число ", чтобы по-прежнему отображать текстовое поле с полезной шириной".

Таким образом, может использоваться атрибут size, но он влияет только на более старые браузеры, которые не поддерживают type=number, так что элемент возвращается к простому текстовому элементу управления, <input type=text>.

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

Вывод состоит в том, что вы должны использовать <input type=number> в более или менее жидкой настройке, которая не делает никаких предположений о размерах элемента.

Ответ 4

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

Поле ввода затем изменяет размер, чтобы соответствовать самому длинному действительному значению.

Если вы хотите разрешить трехзначное число, установите 999 как max

 <input type="number" name="quantity" min="0" max="999">

Ответ 5

Используйте событие onkeykey. Пример для почтового индекса. Он допускает максимум 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">