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

80

Почему размер ввода не меняется, когда я меняю тип на, type="number"но он работает type="text"?

ПРИМЕР

    Email: <input type="text" name="email" size="10"><br/>
  number: <input type="number" name="email" size="10">
СатурнГлаз
источник

Ответы:

81

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

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

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

Феликс
источник
Превосходно! это делает свою работу. И еще одну мелочь, которую я только что заметил. Тип числа также не допускает максимального ограничения числа, как это делает текст. Есть ли способ исправить и это?
Сатурнсай
Он поддерживает это, вы можете увидеть все поддерживаемые значения здесь: w3.org/TR/html-markup/input.number.html
Felix
У меня есть, maxlength="4"и это не вступает в силу там, где оно естьtext
Сатурнсай
4
О, maxlengthне поддерживается, только maxатрибут.
Феликс
5
Если вы хотите настроить таргетинг на определенные размеры, используйте: input[type=number][size="3"]{ width: 3em; }и т. Д.
ник
53

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

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

Итак, в основном вы ищете стиль 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.

MrPk
источник
5
Сказать, что размер в числовых входах «вообще бесполезен» - это натяжка. Если у вас есть числовой ввод с обычными значениями от 2 до 4 (что очень часто), у вас нет возможности контролировать стандартный размер, и все это огромно. Кажется, что входные данные никогда не вызывают любви ... Итак, «решение» - это просто использование текста, даже если на самом деле вам нужны только числа. Не каждый дизайн страницы основан на том, чтобы все входные данные имели огромную ширину, и необходимость указывать ширину всех входных числовых значений является регрессией.
Сорок
1
И это именно то, для чего нужен атрибут размера, он выполняет гораздо лучшую работу, чем заполнение всех входных данных классами и всего вашего CSS с десятками размеров при вычислении всех различных различий входных данных через браузеры :) (и нет, диапазон не имеет ничего общего с делать с этим)
сорок
2
Дело в том, что убирать размер было глупо, не потому что "бесполезно".
40
2
Я в курсе. Мой комментарий имел целью пояснить, что то, что вы включили в свой ответ, неверно.
40
1
Фантастическое исправление, style='width:80'большое спасибо
Fattie
19

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

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

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

 <input type="number" name="quantity" min="0" max="999">
Майкл
источник
Это был единственный способ, которым я мог работать с мобильным Chrome на Android.
Ranvel
5

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

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

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

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

Юкка К. Корпела
источник
0

Вы хотите maxlength.

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

Вы можете рассмотреть возможность использования одного из этих inputтипов.

Андрей
источник
-1

Используйте событие 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">

Майкл
источник
-1

измените type = "number" на type = "tel"

user1882196
источник