Тип ввода «число» не изменится

Почему размер ввода не меняется, когда я меняю тип на, 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;
} 

Обновленная скрипка

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

Номер типа ввода имеет выбираемое значение с помощью стрелок вверх и вниз.

Итак, в основном вы ищете стиль CSS «ширины».

Входной текст исторически форматируется моноширинным шрифтом, поэтому размер - это также ширина, которую он занимает.

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

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

документы w3c

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

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

РЕДАКТИРОВАТЬ: если вам нужен диапазон, вы должны установить, type="range"а не="number"

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

Примечание. Атрибут size работает со следующими типами ввода: текст, поиск, тел., URL, адрес электронной почты и пароль.

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

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

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

Если вы хотите разрешить трехзначное число, установите 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.

Действительно для text, search, url, tel, email, и password, она определяет максимальное число символов (как UTF-16 кодовых единиц) пользователь может ввести в поле. Это должно быть целочисленное значение 0 или больше. Если максимальная длина не указана или указано недопустимое значение, поле не имеет максимальной длины. Это значение также должно быть больше или равно значению minlength.

Вы можете рассмотреть возможность использования одного из этих 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"