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

Question

Я был рад обнаружить, что 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 и делать правильные действия с помощью focus и клавиатуры.

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

--Kent

Answer 1

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

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

Answer 2

Решение состоит в том, чтобы добавить:

    вход {
        -webkit-user-modify: только для чтения-записи-открытого текста;
        -webkit-tap-highlight-color: rgba(255,255,255,0);
    }

в вашем css.

Answer 3

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

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

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