How can I create an HTML INPUT tag to support CSS when it focuses on Android 2.2+?

Question

I was glad to know that Android 2.2 supports the position: fixed CSS selector. I built a simple proof of concept:

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

... which works like a charm. However, when I try to add the INPUT tag to my header, I run into a problem. In focus, every device that I have tried so far has cloned the INPUT tag, gives it an infinite Z-index and replicates it over the old tag. The clone is in the correct position, but most of its parent CSS (including, of course, position: fixed) is ignored. The cloned INPUT tag is the wrong size and shape, and when I look at the body of the page, it scrolls up and down the screen.

After that, fun appears on the screen. Sometimes the device forces the scrolling part of the body back, so that the cloned empty cell returns to the field of view; sometimes the keyboard goes away, although the visible field seems to remain in focus; sometimes the keyboard cannot be rejected, although the INPUT space is clearly blurred. Here is an example that you can run on your Android 2.2 to find out what happens:

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

Entering stylization: the focus has not yet helped, and there are not many different brute-force attempts to listen to focus () and blur () using JavaScript and to do the right thing with the focus and keyboard.

Many thanks for your help,

- Kent

Answer 1

This will probably not be allowed until Android switches to using Chrome for its WebView. The current Android browser creates an Android TextView on top of the page when the HTML input field is centered. Apparently, they are not building or positioning it correctly. You can see that on pages that use contentEditable, this is not the case.

Currently, Chrome-for-Android implements the WebKit IME interface, so the input fields are drawn by WebKit (and lose some of the subtleties of Android TextView on ICS) and should not have such problems.

Answer 2

The solution is to add:

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

in your css.

Answer 3

Perhaps you can solve this problem using the error in Android: http://code.google.com/p/android/issues/detail?id=14295 .

That is, do not display the input field immediately. Instead, display an overlay div that listens for a click and hides itself and shows hidden input and gives input focus. This somehow prevents Android from using more complex input that sits on top of everything and instead uses a browser input field that you can use in any way.

As you noticed in raug raport, although this does not work with input [type = "number"] ...