Удалить фокус наложения цвета веб-просмотра

У меня есть WebView, который загружает сайт, как только я нажимаю некоторые из моих элементов этого сайта, WebView помещает какой-то синий накладку над нажатым элементом.

Есть ли способ удалить это поведение?

Спасибо заранее!

Ответ 1

Вот ответ, который вы ищете [LINK], чтобы суммировать его:

Вы можете легко удалить границу выделения (граница, которая появляется при фокусировке элемента) или изменить ее цвет в WebView с помощью CSS! Свойство WebKit -webkit-tap-highlight-color - это то, что вы ищете.

Следующая строка полностью отключит его на странице:

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

rgba() аналогичен rgb(), но для непрозрачности требуется 4-й параметр. Я полагаю, что это, вероятно, будет работать и для 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);
}

Ответ 2

Хотя решение @g00dy работает в большинстве случаев, есть некоторые версии Android, в которых этого недостаточно. Я пробовал все свойства, упомянутые в этом и других сообщениях, но ничего...

В этом случае единственный подход, который всегда работает, - это свойство:

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

Плохая сторона заключается в том, что она позволяет пользователю редактировать веб-просмотр, и он может отображать клавиатуру и даже позволить пользователю писать через веб-просмотр.

Короче говоря, после долгого дня поиска решений, единственный, который работал у меня во всех устройствах и версиях, использовал указанное свойство, а затем обрабатывал щелчок по веб-просмотру.

Это уродливое обходное решение:

В 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>

Затем мы можем переопределить загрузку Url (или консольного журнала) с Android следующим образом:

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
                }
            });

Если мы изменим фокус с веб-представления на другой элемент, который не редактируется, клавиатура не отображается и эффект является желаемым.

Это не очень хорошее решение, но это единственное, что, наконец, сработало для меня.

Конечно, все это предполагает, что вам нужны другие сенсорные события для работы (масштабирование, прокрутка, клик...). Если нет, переопределение события onTouch над веб-просмотром и ничего не делать было бы достаточно.

Надеюсь, это поможет кому-то. С наилучшими пожеланиями.

Edit: Я заметил, что тот факт, что вы вызываете функцию json "backgroundClick()", отключает эффект выделения, даже удаляя свойство css, а не обрабатывая событие click от Android. Поэтому, если вам не нужно что-то делать с событием, вы можете игнорировать эту часть и просто добавить 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>