Android WebKit 在 textareas 上绘制白色背景 + 边框,并在它们具有焦点时输入。我该如何阻止它这样做?
我尝试更改 -webkit-tap-highlight-color、-webkit-appearance、-webkit-backface-visibility、大纲和其他一些东西,似乎没有任何效果。帮助!
Android WebKit 在 textareas 上绘制白色背景 + 边框,并在它们具有焦点时输入。我该如何阻止它这样做?
我尝试更改 -webkit-tap-highlight-color、-webkit-appearance、-webkit-backface-visibility、大纲和其他一些东西,似乎没有任何效果。帮助!
编辑
好的,所以忘记我之前回答的所有内容。我已经进行了一些测试,这似乎只是 Android 4.0.3 上的问题。还有一些坏消息。
我开始深入研究源代码,我相信问题出在WebTextView类上。处理文本视图和文本区域的类。
如果您在第 233-240 行看到绘制背景的方法总是在内部绘制一个蓝色矩形和一个白色矩形。这正是您的屏幕截图所显示的。
一个好的解决方案是扩展这个类并修复它。不幸的是, sdk 中没有 WebTextView 类。这意味着你不能覆盖它。
我尝试了各种 javascript 来更改 textarea 颜色,甚至重叠元素,但它没有帮助。这不是我们可以从 html 代码中获得的东西。
所以你不能在java上修复它,你不能在javascript上修复它。恐怕这个问题没有解决办法。
编辑
我站得更正了。感谢@grandstaish 的焦点建议,我们可以在TextView
创建后轻松更改背景颜色。我试图使用ViewTreeObserver
一个优雅的解决方案,但我不能只针对我想要的视图。每个 TextView 都会有一个透明的背景,我不希望这样。所以一种混合方法解决了它:
HTML:
<div style="background:red; position:relative; width:100%; height:500px; z-index:0;" id='behind' >
<textarea name="Name"style="background:green; border:none; height:100px; width:250px; position:absolute; top:0; left:0; z-index:1;"
id='area1' onFocus='runOnFocus()' ></textarea>
</div>
JS:
function runOnFocus(){
if (window.device.platform == "Android" && window.device.version =="4.0.3")
//I had to set a timeout here or this would trigger before the TextView was created. 1ms seems to be enough though.
window.setTimeout(function(){
window.AndroidLayer.setBackground();},1);
}
爪哇:
private String TAG = "TextArea";
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/index.html");
appView.addJavascriptInterface(this, "AndroidLayer");
}
public void setBackground(){
runOnUiThread( new Runnable() {
@Override
public void run() {
Log.d("native","gotFocus");
View tv = (View) appView.getFocusedChild();
if (tv == null)
Log.d("native","isNull");
else
tv.setBackgroundColor(Color.TRANSPARENT);
}
});
}
所以我们可以控制页面上哪些元素会触发背景变化。我找不到任何不需要的副作用,但我没有时间在所有版本中测试它,所以我选择将它限制为 4.0.3,这是我能找到的唯一版本。
聚焦时,Android 会在 Web 文本字段的顶部放置一个原生 textview。这是您无法阻止的代码,它内置在 webview 中。
您可以通过将本机 textview 的可见性设置为 View.GONE 来解决它。如果您需要有关如何执行此操作的更多信息,请告诉我!
编辑:我刚刚检查了 Jellybean 的源代码,这种行为似乎已经改变。Jellybean 上没有原生覆盖 WebTextView!也许您看到背景的平板电脑是 Jellybean 平板电脑。无论如何,我所说的仍然适用于ICS及以下。