Ho un WebView che carica un sito, quando premo alcuni dei miei elementi di quel sito, la WebView posiziona una sorta di sovrapposizione blu sull'elemento premuto.Remove focus overlay-color of webview
Esiste comunque la rimozione di questo comportamento?
Grazie in anticipo!
Ecco la risposta che stai cercando [LINK], per riassumere:
Si può facilmente rimuovere il bordo evidenziazione (il confine che si apre quando un elemento è focalizzato) o cambia il suo colore in una WebView con i CSS ! La proprietà specifica di WebKit "-webkit-tap-highlight-color" è ciò che stai cercando.
La riga seguente si disabilita su una pagina completamente:
{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
rgba() è proprio come rgb(), ma ci vuole un quarto parametro per l'opacità. È mia opinione che questo probabilmente funzionerà anche per iPhone WebView, poiché sia Chrome che Safari sono basati su WebKit.
È CSS, quindi puoi inserirlo in un foglio di stile esterno o all'interno di una pagina HTML con un tag di stile.
Un altro approccio più elaborato, preso dalla sezione commen del collegamento è:
{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
:focus {
outline: 0;
border:none;
color: rgba(0, 0, 0, 0);
}
Sebbene @ g00dy soluzione funziona nella maggior parte dei casi, ci sono alcune versioni di Android in cui questo non è sufficiente. Ho provato tutte le proprietà menzionate in questo e altri posti, ma niente ...
In quei casi l'unico approccio che funziona sempre è utilizzando la proprietà:
-webkit-user-modify: read-write-plaintext-only;
Il lato negativo è che permette la utente per modificare la visualizzazione Web e potrebbe mostrare la tastiera e anche consentire all'utente di scrivere sulla visualizzazione Web.
In breve, dopo una lunga giornata in cerca di soluzioni, l'unico che ha funzionato per me in tutti i dispositivi e le versioni stava utilizzando la proprietà indicata e quindi gestendo il clic sulla visualizzazione Web.
Questa è la brutta soluzione:
nel codice HTML ho usato un div per avvolgere il codice foro e aggiunto una funzione per l'evento 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>
Poi possiamo ignorare l'URL di carico (oppure il log della console) da Android come segue:
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
}
});
Se cambiamo l'attenzione dal WebView ad un altro elemento non modificabile, la tastiera non viene mostrato e l'effetto è il de uno.
Non è una buona soluzione, ma è l'unico che ha funzionato alla fine per me.
Ovviamente, tutto ciò presuppone che siano necessari gli altri eventi di tocco (pinch-zoom, scroll, click ...).Altrimenti, ignorare l'evento onTouch sulla webview e non fare nulla sarebbe sufficiente.
Spero che questo aiuti qualcuno. Saluti.
Edit: Ho notato che il fatto che si chiama il "backgroundClick()" la funzione js disabilita l'effetto di evidenziazione anche di rimuovere la proprietà CSS e non la gestione dell'evento click da Android. Quindi, se non c'è bisogno di fare qualcosa con l'evento si può ignorare questa parte e basta aggiungere de eventListener in secondo piano e non fare nulla:
<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>
Solo un'idea, potresti aver usato 'pointer-events: none' [doc] (https://developer.mozilla.org/en/docs/Web/CSS/pointer -eventi) invece di sovrascrivere onclick. – venkatvb
grazie per l'aiuto :) – Inx
sempre Wellcome ;-) – g00dy
Piuttosto che rendere il colore nero e impostare alpha su 0. potresti aver usato '-webkit-tap-highlight-color: transparent;' [doc] (https://developer.mozilla.org/en-US/docs/Web/ CSS/-webkit-tap-highlight-color) – venkatvb