我如何样式的HTML INPUT标记,以便它保持CSS的时候专注于安卓2.2+? [英] How can I style an HTML INPUT tag so it maintains CSS when focused on Android 2.2+?

查看:172
本文介绍了我如何样式的HTML INPUT标记,以便它保持CSS的时候专注于安卓2.2+?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我很高兴地发现,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:

<一个href="http://kentbrewster.com/android-scroller/scroller.html">http://kentbrewster.com/android-scroller/scroller.html

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

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

一旦它的关闭屏幕,随之而来的欢闹。有时该装置将迫使本体的滚动部分回落,以便克隆的空白是早在图;有时键盘消失,即使在可见光中似乎依然在焦点;有时即使输入空白显然是模糊的键盘不能被解雇。这里是你可以在你的Andr​​oid 2.2的设备上运行,看看发生了什么事的例子:

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:

<一个href="http://kentbrewster.com/android-input-style-bug/">http://kentbrewster.com/android-input-style-bug/

造型输入:焦点还没有做的伎俩我呢,也有许多不同的蛮力试图侦听焦点()和模糊()JavaScript和做正确的事,重点和键盘

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.

非常感谢您的帮助,

- 肯特

推荐答案

这可能不会得到解决,直到Android的切换到使​​用Chrome浏览器的web视图。目前Android浏览器在页面顶部创建一个Android的TextView,当一个HTML输入字段被聚焦。显然,他们没有风格或正确定位。你可以看到它去多错在使用CONTENTEDITABLE页面。

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.

目前的Chrome换的Andr​​oid实现了WebKit的IME接口,所以输入字段由WebKit的绘制(​​并失去了一些在Android的TextView对ICS的细微的),应该不会有这样的问题。

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.

这篇关于我如何样式的HTML INPUT标记,以便它保持CSS的时候专注于安卓2.2+?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆