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

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

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

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

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

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

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

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

- Кент

Ответ 1

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

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

Ответ 2

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

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

в вашем css.

Ответ 3

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

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

Как вы заметили в raug raport, хотя это не работает с вводом [type = "number" ]...