Ошибка отображения с номером типа ввода HTML на iPhone iOS / Safari - PullRequest
Новая
       30

Ошибка отображения с номером типа ввода HTML на iPhone iOS / Safari

4 голосов
/ 26 июля 2011

Я хочу использовать HTML input type = "number" в мобильном приложении, чтобы указать более умным мобильным телефонам (Android, iPhone и некоторым другим), что цифровая клавиатура интереснее для пользователя, чем обычнаяодин.Это прекрасно работает.

Итак, у меня есть этот фрагмент HTML здесь: 

<h3>type="number"</h3>
<input type="number" class="input-number"/>
<h3>type="text"</h3>
<input type="text" class="input-text"/>

Здесь применяются следующие важные элементы CSS: 

input {
  height: 2em;
  padding: 0.2em 0.5em;
  width: 100%;

  /* avoid iPhone rounded corners */
  border: 1px solid #afb7c1;
  border-collapse: collapse;
  border-radius: 0 0 0 0;
}

.input-number {
  text-align: right;
}

Какие должен отобразиться так:

enter image description here

Выше приведен скриншот, сделанный из iOS 4.1, где мир все еще был в порядке.Также на телефонах Android все работает отлично.Но посмотрите, что происходит на iOS 4.2, 4.3:

enter image description here

Внезапно числовое поле становится немного менее широким, как будто iPhone хочет освободить место длятот бесполезный счетчик, который появляется в некоторых браузерах, когда ввод имеет тип = "число".

Кто-нибудь знает о такой проблеме?Как ты это починил?Или обойти это?Есть ли другой способ заставить мобильные телефоны предпочитать цифровую клавиатуру?Или есть какой-то собственный стиль CSS, который я могу применить, чтобы отменить это дополнительное правое поле?

Ответы [ 4 ]

6 голосов
/ 05 августа 2011

На самом деле, спрашивающий сам очень близок к ответу, поскольку он знает, что это ошибка прядильщика, и, к счастью, веб-набор позволяет пользователям контролировать его с помощью CSS: 

input[type="number"]::-webkit-outer-spin-button { display: none; }

Источник: УДАЛИТЬSPIN CONTROL INPUT TYPE = NUMBER IN WEBKIT

Демонстрационная версия: http://jsbin.com/aviram/5/

Надеюсь, это поможет.

6 голосов
/ 22 августа 2011

В то время как решение vincicat (ранее принятое за вознаграждение) сначала казалось работающим, оно обнаружило еще один недостаток рендеринга в браузере Webkit. В 2 из 10 обновлений страницы вход был обработан с нулевой шириной, когда помещен в <td> и стилизован с width: 100% ...

Лучшее решение (для моего варианта использования) было найдено здесь:

Отключить кнопки прокрутки webkit на входе type = "number"?

Он состоит из следующих стилей CSS: 

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Интересное дополнение: Я обнаружил, что поле <input type="number"/> очень некорректно в браузерах Blackberry WebKit. Похоже, это источник сбоя браузера. Сказав это, мы больше не используем эту функцию HTML 5 ...

3 голосов
/ 26 июля 2011

Не уверен, поможет ли это, но попробуйте добавить эти строки в input css 

-webkit-box-sizing: border-box;
box-sizing: border-box;
0 голосов
/ 14 марта 2019

У меня нет доступа к более старым устройствам iOS, чтобы протестировать его, но это работает на современной iOS, и в то же время Google Chrome начал не подчиняться ширине: также, это исправляет оба: 

input[type=number] {
  max-inline-size: none; /* chrome 71 */
  max-width: unset; min-width: unset; /* iOS12 */
}
...