Как я могу стилизовать тег HTML INPUT, чтобы он поддерживал CSS при работе с Android 2.2+? - PullRequest
Новая
       15

Как я могу стилизовать тег HTML INPUT, чтобы он поддерживал CSS при работе с Android 2.2+?

11 голосов
/ 12 октября 2010

Я был рад узнать, что Android 2.2 поддерживает положение: фиксированный селектор CSS. Я построил простую концепцию проверки здесь:

http://kentbrewster.com/android-scroller/scroller.html

... который работает как шарм. Однако когда я пытаюсь добавить тег INPUT в свой заголовок, у меня возникают проблемы. В фокусе, каждое устройство, которое я пробовал до сих пор, клонирует тег INPUT, дает ему бесконечный Z-индекс и перерисовывает его поверх старого тега. Клон находится примерно в правильной позиции, но большая часть CSS его родителя (включая, конечно, position: fixed) игнорируется. Клонированный тег INPUT имеет неправильный размер и форму, и когда я прокручиваю тело страницы, он прокручивается вверх и за пределы экрана.

Как только он выходит за пределы экрана, наступает веселье. Иногда устройство заставляет прокручиваемую часть тела вернуться вниз, чтобы клонированная заготовка снова была в поле зрения; иногда клавиатура пропадает, хотя видимое поле, кажется, остается в фокусе; иногда клавиатура не может быть отклонена, даже если бланк INPUT явно размыт. Вот пример, который вы можете запустить на своем устройстве Android 2.2, чтобы увидеть, что происходит:

http://kentbrewster.com/android-input-style-bug/

Стилизация ввода: фокус еще не помог мне, и у меня не было множества попыток грубой силы прослушивать focus () и blur () с помощью JavaScript и делать правильные действия с фокусом и клавиатурой.

Большое спасибо за вашу помощь,

- Кент

Ответы [ 3 ]

13 голосов
/ 23 февраля 2012

Это, вероятно, не будет решено, пока Android не переключится на использование Chrome для WebView.Текущий браузер Android создает текстовое представление Android в верхней части страницы, когда фокусируется поле ввода HTML.По-видимому, они не стилизуют и не позиционируют его правильно.Вы можете заметить, что он работает неправильно на страницах, которые используют contentEditable.

В текущем Chrome-для-Android реализован интерфейс WebKit IME, поэтому поля ввода отрисовываются WebKit (и теряют некоторые тонкости Android TextView.на ICS) и не должно быть таких проблем.

9 голосов
/ 15 февраля 2013

Решение добавить: 


    input {
        -webkit-user-modify: read-write-plaintext-only;
        -webkit-tap-highlight-color: rgba(255,255,255,0);
    }

в вашем css.

1 голос
/ 28 января 2011

Вы можете решить эту проблему, используя ошибку в Android: http://code.google.com/p/android/issues/detail?id=14295.

То есть не отображать поле ввода сразу. Вместо этого отобразите оверлейный элемент div, который прослушивает щелчок и скрывает себя, показывает скрытый ввод и дает фокус ввода. Это как-то мешает Android использовать странный ввод, который помещается поверх всего, и вместо этого использует поле ввода браузера, которое можно стилизовать любым способом.

Как вы заметите в отчете об ошибках, это не работает с input [type = "number"] ...

...