Tôi có một trang WebView tải trang web, khi tôi nhấn một số thành phần của trang web đó, WebView sẽ đặt một số lớp phủ màu xanh lên phần tử được nhấn.Xóa màu lớp phủ tiêu điểm của webview
Có cách nào để xóa hành vi này không?
Cảm ơn trước!
Dưới đây là câu trả lời bạn đang tìm kiếm [LINK], để tóm tắt nó:
Bạn có thể dễ dàng loại bỏ các biên giới nổi bật (biên giới mà đi lên khi một phần tử là tập trung) hoặc thay đổi màu sắc của nó trong một WebView với CSS ! Thuộc tính WebKit cụ thể "-webkit-tap-highlight-color" là những gì bạn đang tìm kiếm.
Các dòng sau sẽ vô hiệu hóa nó trên một trang hoàn toàn:
{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
rgba() là giống như rgb(), nhưng phải mất một tham số thứ 4 cho opacity. Đó là niềm tin của tôi rằng điều này có thể sẽ làm việc cho iPhone WebView là tốt, vì cả Chrome và Safari đều dựa trên WebKit.
Đó là CSS, vì vậy bạn có thể đặt nó trong biểu định kiểu bên ngoài hoặc bên trong trang HTML có thẻ kiểu.
Một cách tiếp cận phức tạp hơn, lấy từ phần commen của liên kết là:
{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
:focus {
outline: 0;
border:none;
color: rgba(0, 0, 0, 0);
}
Mặc dù @ g00dy giải pháp làm việc trong hầu hết các trường hợp, có một số phiên bản Android mà điều này là không đủ. Tôi đã thử tất cả các tính chất nêu tại này và các bài viết khác, nhưng không có gì ...
Trong những trường hợp mà phương pháp duy nhất mà luôn luôn làm việc đang sử dụng bất động sản:
-webkit-user-modify: read-write-plaintext-only;
Các mặt xấu là nó cho phép người người dùng chỉnh sửa chế độ xem web và nó có thể hiển thị bàn phím và thậm chí cho phép người dùng viết trên chế độ xem web.
Tóm lại, sau một ngày dài tìm kiếm giải pháp, người duy nhất làm việc cho tôi trong tất cả các thiết bị và phiên bản đã sử dụng thuộc tính được giới thiệu và sau đó xử lý nhấp chuột qua chế độ xem web.
Đây là workaround xấu xí:
Trong html tôi đã sử dụng một div để quấn mã lỗ và thêm một chức năng để sự kiện 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>
Sau đó, chúng ta có thể ghi đè lên tải Url (hoặc console log) từ Android như sau:
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
}
});
Nếu chúng ta thay đổi trọng tâm từ webview đến một yếu tố khác không thể chỉnh sửa, bàn phím không được hiển thị và ảnh hưởng là de một người.
Nó không phải là một giải pháp tốt nhưng nó là chỉ mà cuối cùng đã làm việc cho tôi.
Tất nhiên, tất cả điều này là giả sử bạn cần các sự kiện chạm khác để hoạt động (chụm-zoom, cuộn, nhấp ...).Nếu không, hãy ghi đè sự kiện onTouch trên webview và không làm gì cả.
Tôi hy vọng điều này sẽ giúp ai đó. Trân trọng.
Chỉnh sửa: Tôi nhận thấy rằng bạn gọi hàm "backgroundClick()" js sẽ tắt hiệu ứng nổi bật thậm chí xóa thuộc tính css và không xử lý sự kiện nhấp từ Android. Vì vậy, nếu bạn không cần phải làm điều gì đó với sự kiện này, bạn có thể bỏ qua phần đó và chỉ cần thêm de eventListener để nền và không làm gì cả:
<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>
Chỉ là một ý tưởng, bạn có thể đã sử dụng 'pointer-events: none' [doc] (https://developer.mozilla.org/en/docs/Web/CSS/pointer - thay vì ghi đè onclick. – venkatvb
cảm ơn vì sự giúp đỡ :) – Inx
Luôn luôn wellcome ;-) – g00dy
Thay hơn là tạo màu đen và đặt alpha thành 0. bạn có thể đã sử dụng '-webkit-tap-highlight-color: transparent;' [doc] (https://developer.mozilla.org/en-US/docs/Web/ CSS/-webkit-tap-highlight-color) – venkatvb