Menu
I have a WebView that loads a site, once I press some of my elements of that site, the WebView places some kind of blue overlay over the pressed element.
Is there anyway to remove this behaviour?
Thanks in advance!
690
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);
}
Although @g00dy solution works in most cases, there are some Android versions in which this is not enough. I tried all the properties mentioned in this and other posts, but nothing...
In that cases the only approach that always works is using the property:
-webkit-user-modify: read-write-plaintext-only;
The bad side is that it allows the user to edit the webview and it could show the keyboard and even let the user write over the webview.
In short, after a long day looking for solutions, the only one that worked for me in all devices and versions was using the referred property and then handling the click over the webview.
This is the ugly workaround:
In the html I used a div to wrap the hole code and added a function to the click event:
<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>
Then we can override the Url loading (or the console log) from Android as follows:
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
}
});
If we change the focus from the webview to another element not editable, the keyboard is not shown and the effect is the desired one.
It's not a good solution but it is the only that finally worked for me.
Of course, all this is supposing you need the other touch events to work (pinch-zoom, scroll, click...). If not, overriding the onTouch event over the webview and doing nothing would be enough.
I hope this helps someone. Regards.
Edit: I've noticed that the fact that you call the "backgroundClick()" js function disables the highlight effect even removing the css property and not handling the click event from Android. So if you don't need to do something with the event you can ignore that part and just add de eventListener to the background and do nothing:
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
