移除 webview 的焦点覆盖颜色答案

【问题标题】：Remove focus overlay-color of webview移除 webview 的焦点覆盖颜色
【发布时间】：2013-06-28 08:31:35
【问题描述】：

我有一个加载站点的WebView，一旦我按下该站点的一些元素，WebView 就会在按下的元素上放置某种蓝色叠加层。

有没有办法消除这种行为？

提前致谢！

【问题讨论】：

标签： android webview focus

【解决方案1】：

这里就是你要找的答案 [LINK]，总结一下：

您可以轻松移除高亮边框（当元素获得焦点时出现的边框）或使用 CSS 在 WebView 中更改其颜色！ WebKit 特有的属性“-webkit-tap-highlight-color”就是你要找的。p>

以下行将在页面上完全禁用它：

{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
}

rgba() 就像rgb()，但它需要第四个参数来表示不透明度。我相信这可能也适用于 iPhone WebView，因为 Chrome 和 Safari 都基于 WebKit。

它是 CSS，因此您可以将其放在外部样式表中，或带有样式标签的 HTML 页面内部。

另一种更详细的方法，取自链接的评论部分：

{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
:focus {
outline: 0;
border:none;
color: rgba(0, 0, 0, 0);
}

【讨论】：

而不是将颜色设置为黑色并将 alpha 设置为 0。您可以使用 -webkit-tap-highlight-color: transparent; doc

【解决方案2】：

虽然@g00dy 解决方案在大多数情况下都有效，但在某些 Android 版本中这还不够。我尝试了这篇文章和其他帖子中提到的所有属性，但没有...

在这种情况下，唯一始终有效的方法是使用该属性：

-webkit-user-modify: read-write-plaintext-only;

不好的一面是它允许用户编辑 webview，它可以显示键盘，甚至让用户在 webview 上书写。

简而言之，在寻找解决方案一整天之后，唯一一个在所有设备和版本中都对我有用的是使用引用的属性，然后处理 web 视图上的点击。

这是丑陋的解决方法：

在html中我使用了一个div来包装洞的代码，并在点击事件中添加了一个函数：

<html>
<head>...</head>
<body>
<div id="background">...content...</div>
</body>
<script type="text/javascript">
window.onload = function(){
    var background = document.getElementById("background");
    background.addEventListener("click",backgroundClick,false);

    function backgroundClick(e) {
        console.log("whatever"); 
        window.location.href="ftp://"; //some protocolor (dummy url)
    }
}
</script>
</html>

然后我们可以从 Android 覆盖 Url 加载（或控制台日志），如下所示：

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);    
webView.setWebViewClient(new WebViewClient() {
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    someView.requestFocus();
                    //do something else if needed
                    return true; //or false if you want the webview to process the url loading
                }
            });

如果我们将焦点从 webview 更改为另一个不可编辑的元素，则不会显示键盘，并且效果是所需的。

这不是一个好的解决方案，但它是唯一对我有用的解决方案。

当然，所有这一切都是假设您需要其他触摸事件（捏缩放、滚动、单击...）。如果没有，覆盖 webview 上的 onTouch 事件并且什么都不做就足够了。

我希望这对某人有所帮助。问候。

编辑： 我注意到您调用“backgroundClick()”js 函数的事实会禁用突出显示效果，即使删除 css 属性并且不处理来自 Android 的点击事件。因此，如果您不需要对事件做任何事情，您可以忽略该部分，只需将 de eventListener 添加到后台，什么都不做：

<html>
    <head>...</head>
    <body>
    <div id="background">...content...</div>
    </body>
    <script type="text/javascript">
    window.onload = function(){
        var background = document.getElementById("background");
        background.addEventListener("click",backgroundClick,false);

        function backgroundClick(e) {
            //nothing
        }
    }
    </script>
</html>

【讨论】：

只是一个想法，您可以使用 pointer-events: none doc 而不是覆盖 onclick。