Tắt đánh dấu đường viền màu cam trên tiêu điểm

Tôi đang viết mã một ứng dụng bằng jQuery, jqTouch và phonegap và đã gặp phải sự cố dai dẳng phát sinh khi người dùng gửi biểu mẫu bằng nút Go trên bàn phím mềm.

Mặc dù có thể dễ dàng đưa con trỏ di chuyển đến phần tử nhập biểu mẫu thích hợp bằng cách sử dụng $('#input_element_id').focus(), phần tô sáng đường viền màu cam luôn quay trở lại thành phần đầu vào cuối cùng trên biểu mẫu. (Phần đánh dấu không hiển thị khi biểu mẫu được gửi bằng nút gửi biểu mẫu.)

Những gì tôi cần là tìm cách vô hiệu hóa hoàn toàn phần đánh dấu màu cam hoặc làm cho nó di chuyển đến phần tử đầu vào giống như con trỏ.

Cho đến nay, tôi đã thử thêm phần sau vào CSS của mình:

.class_id:focus {
    outline: none;
}

Điều này hoạt động trong Chrome nhưng không hoạt động trên trình mô phỏng hoặc trên điện thoại của tôi. Tôi cũng đã thử chỉnh sửa jqTouch theme.cssđể đọc:

ul li input[type="text"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); and
    -webkit-focus-ring-color:  rgba(0, 0, 0, 0);
}

Không ảnh hưởng gì. Tôi cũng đã thử từng phần bổ sung sau vào AndroidManifest.xmltệp:

android:imeOptions="actionNone"
android:imeOptions="actionSend|flagNoEnterAction"
android:imeOptions="actionGo|flagNoEnterAction"

Không có bất kỳ tác dụng nào.

Cập nhật: Tôi đã thực hiện thêm một số khắc phục sự cố với điều này và đến nay đã tìm thấy:

1. Thuộc tính phác thảo chỉ hoạt động trên Chrome, không hoạt động trên trình duyệt Android.

2. Các -webkit-tap-highlight-colorbất động sản thực hiện trong công việc thực tế trên trình duyệt Android, mặc dù không phải trên Chrome. Nó vô hiệu hóa điểm nổi bật trên tiêu điểm cũng như khi khai thác.

3. Các -webkit-focus-ring-colorbất động sản dường như không làm việc trên cả hai trình duyệt.

Thử:

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
-webkit-tap-highlight-color: transparent;  // i.e. Nexus5/Chrome and Kindle Fire HD 7''

Hoạt động trên Android mặc định, Android Chrome và iOS Safari 100%

* {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; 
    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
    outline: none !important;
} 

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

trong tệp css của bạn. Nó đã làm việc cho tôi!

Xóa hộp màu cam trên tiêu điểm đầu vào dành cho Android

textarea:focus, input:focus{
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);    
    -webkit-user-modify: read-write-plaintext-only;
}

tap-highlight-color cho hầu hết các phiên bản

người dùng sửa đổi cho 4.0.4

Thử cho Dòng tiêu điểm

body, textarea:focus, input:focus{
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

Lưu ý rằng việc sử dụng CSS này -webkit-user-modify: read-write-plaintext-only;SẼ loại bỏ 'lỗi' đánh dấu khủng khiếp đó - NHƯNG nó có thể giết chết khả năng cung cấp bàn phím cụ thể của thiết bị của bạn. Đối với chúng tôi đang chạy Android 4.0.3 trên Samsung Tab 2, chúng tôi không thể nhận được bàn phím số nữa. Ngay cả khi sử dụng type = 'number' & / hoặc type = 'tel'. Rất bực bội! BTW, cài đặt màu đánh dấu nhấn đã không giải quyết được vấn đề này đối với cấu hình thiết bị và hệ điều hành này. Chúng tôi đang chạy Safari cho Android.

Để đảm bảo thuộc tap-highlight-colortính ghi đè phù hợp với bạn, trước tiên hãy xem xét những điều sau:

Không hoạt động:
-webkit-user-mod: read-write-plaintext-only;
// Đôi khi nó kích hoạt bàn phím gốc bật lên khi nhấp vào phần tử

.class: hoạt động, .class: focus {-webkit-tap-highlight-color: rgba (0,0,0,0); }
// Nó không hoạt động nếu được định nghĩa cho các trạng thái

Đang làm việc:
.class { -webkit-tap-highlight-color: rgba(0,0,0,0); }

Trường hợp này hoạt động cho Android từ v2.3 đến v4.x ngay cả trong ứng dụng PhongeGap. Tôi đã thử nghiệm nó trên Galaxy Y với Android 2.3.3, trên Nexus 4 với Android 4.2.2 và trên Galaxy Note 2 với Android 4.1.2. Vì vậy, không xác định nó cho các trạng thái chỉ cho chính phần tử .

Sử dụng mã bên dưới trong tệp CSS

  * {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    :focus {
        outline: 0;
        border:none;
        color: rgba(0, 0, 0, 0);
    }

Nó làm việc cho tôi. Tôi hy vọng nó làm việc cho bạn.

Điều này không hiệu quả với tôi trên các liên kết Khu vực Bản đồ Hình ảnh, giải pháp hiệu quả duy nhất là sử dụng javascript bằng cách nắm bắt sự kiện ontouchend và ngăn chặn hành vi mặc định của trình duyệt bằng cách trả về false trên trình xử lý.

với jQuery:

$("map area").on("touchend", function() {
   return false;
});

Tôi chỉ muốn chia sẻ kinh nghiệm của tôi. Tôi không thực sự làm cho điều này hoạt động và tôi muốn tránh sự chậm chạp- *. Giải pháp của tôi là tải xuống CSS Reset cũ của Eric Meyer v2.0 ( http://meyerweb.com/eric/tools/css/reset/ ) và thêm cái này vào dự án phonegap của tôi. Sau đó tôi thêm:

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /** Disable orange highlight */

Theo kinh nghiệm của tôi, đây là cách tiếp cận nhanh hơn với *, nhưng nó cũng là cách tiếp cận ít lỗi kỳ lạ hơn. Sự kết hợp của tap-highlight, -webkit-user-mod: read-write-plaintext-only và vô hiệu hóa ví dụ như đánh dấu văn bản đã cung cấp cho chúng tôi rất nhiều tiêu đề. Một trong những điều tồi tệ nhất là đột nhiên nhập liệu bàn phím ngừng hoạt động và hình ảnh bàn phím chậm.

Hoàn tất thiết lập lại CSS với phần đánh dấu màu cam bị tắt:

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /** Disable orange highlight */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Tôi đã thử cái này và hoạt động tốt: -

HTML: -

<a class="html5logo"  href="javascript:void(0);"  ontouchstart="return true;"></a>

css

.html5logo {
  display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}
.html5logo:active {
  -webkit-transform: scale3d(0.9, 0.9, 1);
}

Điều này sẽ không chỉ hoạt động đối với các lần nhấn mà còn khi di chuột qua:

button, button:hover, li:hover, a:hover , li , a , *:hover, * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

<EditText
            android:id="@+id/edittext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"  
            android:background="@android:drawable/editbox_background_normal"                 

 />

Công việc này đối với tôi trong Ionic, chỉ cần đưa vào tệp CSS để ghi đè

:focus {
    outline-width: 0px;
}

Nếu thiết kế không sử dụng đường viền, điều này sẽ thực hiện công việc:

*, *::active, *::focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important;
    -webkit-focus-ring-color: rgba(0, 0, 0, 0)!important;
    outline: none!important;
}

Hãy thử mã sau để tắt đường viền

phác thảo: không quan trọng;