12

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

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

提前致谢！

4

2 回答 2

30

Here's the answer you're looking for [LINK], to summarize it:

You can easily remove the highlight border (the border that comes up when an element is focused) or change it's color in a WebView with CSS! The WebKit-specific property "-webkit-tap-highlight-color" is what you're looking for.

The following line will disable it on a page completely:

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

rgba() is just like rgb(), but it takes a 4th parameter for opacity. It's my belief that this would probably work for iPhone WebView's as well, since both Chrome and Safari are based off of WebKit.

It’s CSS, so you can put it in an external stylesheet, or inside of an HTML page with a style tag.

Another more elaborate approach, taken from the commen section of the link is:

{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
:focus {
outline: 0;
border:none;
color: rgba(0, 0, 0, 0);
}
于 2013-06-28T08:42:57.173 回答
2

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

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

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

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

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

这是丑陋的解决方法：

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

<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>
于 2015-06-10T06:40:37.590 回答