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

Я хочу использовать тип ввода HTML = "номер" в мобильном приложении, чтобы указать на более интеллектуальные мобильные телефоны (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;
}

Что должно выглядеть так:

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

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

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

Ответ 1

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

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

Отключить кнопки запуска webkit на типе ввода = "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...

Ответ 2

Собственно, сам вопросник очень близок к ответу, поскольку он знает, что это ошибка spinner, и, к счастью, webkit позволяет пользователям управлять им с помощью CSS:

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

Источник: УДАЛИТЬ УПРАВЛЕНИЕ СПИНОМ НА ВХОДЕ ТИП = НОМЕР В WEBKIT

Live demo: http://jsbin.com/aviram/5/

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

Ответ 3

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

-webkit-box-sizing: border-box;
box-sizing: border-box;