如何设置HTML INPUT标签的样式，以便在专注于Android 2.2+时维护CSS？

I was delighted to discover that Android 2.2 supports the position:fixed CSS selector. I've built a simple proof-of concept, here:

我很高兴发现Android 2.2支持这个位置:固定的CSS选择器。我在这里构建了一个简单的概念证明:

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

... which works like a charm. When I attempt to add an INPUT tag to my header, however, I hit trouble. On focus, every device I've tried so far clones the INPUT tag, gives it an infinite Z-index, and repaints it on top of the old tag. The clone is in roughly the right position, but most of its parent's CSS (including, of course, position:fixed) is ignored. The cloned INPUT tag is the wrong size and shape, and when I scroll the body of the page, it scrolls up and off the screen.

......这就像一个魅力。但是,当我尝试向我的标题添加INPUT标记时,遇到了麻烦。在焦点上,到目前为止我尝试过的每个设备都克隆了INPUT标签,给它一个无限的Z-index,并在旧标签上重新绘制它。克隆位于大致正确的位置,但其父级的大多数CSS(当然包括位置:固定)将被忽略。克隆的INPUT标签的大小和形状错误,当我滚动页面的主体时,它会向上和向下滚动屏幕。

Once it's off screen, hilarity ensues. Sometimes the device will force the scrolling part of the body back down so the cloned blank is back in view; sometimes the keyboard goes away even though the visible box seems to remain in focus; sometimes the keyboard cannot be dismissed even though the INPUT blank is clearly blurred. Here's an example you can run on your Android 2.2 device to see what's happening:

一旦它离开屏幕,就会出现欢闹。有时设备会强制身体的滚动部分向下,这样克隆的空白就会回到视野中;有时键盘会消失,即使可见的盒子似乎仍然在焦点上;有时即使INPUT空白明显模糊,也无法解除键盘。以下是您可以在Android 2.2设备上运行以查看正在发生的情况的示例:

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

Styling input:focus has not done the trick for me yet, nor have many different brute-force attempts to listen for focus() and blur() with JavaScript and do the right thing with focus and the keyboard.

样式输入:焦点还没有完成我的技巧,也没有很多不同的暴力尝试用JavaScript监听focus()和blur()并用焦点和键盘做正确的事情。

Thanks very much for your help,

非常感谢您的帮助,

--Kent

3 个解决方案

#1

This will probably not be resolved until Android switches to using Chrome for its WebView. The current Android browser creates an Android TextView on top of the page when an HTML input field is focussed. Apparently they don't style or position it correctly. You can see it go more wrong on pages that use contentEditable.

在Android切换到使用Chrome作为其WebView之前,这可能无法解决。当聚焦HTML输入字段时,当前的Android浏览器会在页面顶部创建一个Android TextView。显然他们没有正确地设计或定位它。您可以在使用contentEditable的网页上看到它出错。

The current Chrome-for-Android implements the WebKit IME interface, so input fields are drawn by WebKit (and lose some of the niceties of the Android TextView on ICS) and shouldn't have issues like this.

目前的Chrome-for-Android实现了WebKit IME界面,因此输入字段由WebKit绘制(并且在ICS上丢失了一些Android TextView的细节),不应该有这样的问题。

#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.

在你的CSS。

#3

You might be able to solve it by using a bug in Android: http://code.google.com/p/android/issues/detail?id=14295.

您可以使用Android中的错误解决此问题:http://code.google.com/p/android/issues/detail?id = 14295。

That is, don't display the input field right away. Instead, display an overlay div which listens on click and hides itself and shows the hidden input, and give the input focus. This somehow prevents Android from using the wierd input that gets placed on top of everything, and is instead using the browsers input field which you can style any way you want.

也就是说,不要立即显示输入字段。相反,显示一个覆盖div,它侦听单击并隐藏自身并显示隐藏的输入,并给出输入焦点。这会以某种方式阻止Android使用置于所有内容之上的奇怪输入,而是使用浏览器输入字段,您可以按照自己想要的方式设置样式。

As you'll note in the bug raport though, this doesn't work with input[type="number"]...

正如您将在bug raport中注意到的,这不适用于输入[type =“number”] ...

#1