Nonaktifkan sorotan garis oranye pada fokus

Saya mengkodekan aplikasi menggunakan jQuery, jqTouch dan phonegap dan mengalami masalah terus-menerus yang muncul ketika pengguna mengirimkan formulir menggunakan tombol Buka pada keyboard lunak.

Meskipun mudah untuk mengarahkan kursor ke elemen masukan formulir yang sesuai dengan menggunakan $('#input_element_id').focus(), sorotan garis luar oranye selalu kembali ke elemen masukan terakhir pada formulir. (Sorotan tidak muncul saat formulir dikirimkan menggunakan tombol kirim formulir.)

Yang saya butuhkan adalah menemukan cara untuk menonaktifkan sorotan oranye sepenuhnya atau memindahkannya ke elemen input yang sama dengan kursor.

Sejauh ini, saya telah mencoba menambahkan yang berikut ini ke CSS saya:

.class_id:focus {
    outline: none;
}

Ini berfungsi di Chrome tetapi tidak di emulator atau di ponsel saya. Saya juga mencoba mengedit jqTouch theme.cssuntuk membaca:

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

Tanpa efek. Saya juga mencoba setiap tambahan berikut ke AndroidManifest.xmlfile:

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

Tidak ada satupun yang berpengaruh.

Pembaruan: Saya telah melakukan pemecahan masalah lagi dengan ini dan hingga saat ini telah menemukan:

1. Properti garis batas hanya berfungsi di Chrome, bukan di browser Android.

2. The -webkit-tap-highlight-colorproperti sebenarnya tidak bekerja pada browser Android, meskipun tidak pada Chrome. Ini menonaktifkan sorotan pada fokus serta mengetuk.

3. The -webkit-focus-ring-colorproperti tampaknya tidak bekerja pada salah satu browser.

Mencoba:

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

Bekerja di Android Default, Android Chrome dan 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);  
} 

di file css Anda. Itu berhasil untuk saya!

Hapus kotak oranye pada fokus input untuk Android

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

tap-highlight-color untuk sebagian besar versi

modifikasi pengguna untuk 4.0.4

Coba untuk Garis Fokus

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

Ketahuilah bahwa menggunakan CSS ini -webkit-user-modify: read-write-plaintext-only;AKAN menghapus 'bug' sorotan yang mengerikan itu - TETAPI dapat mematikan kemampuan perangkat Anda untuk menyediakan keyboard tertentu. Bagi kami yang menjalankan Android 4.0.3 pada Samsung Tab 2, kami tidak bisa lagi mendapatkan keyboard numerik. Bahkan menggunakan type = 'number' & / atau type = 'tel'. Sangat membuat frustasi! BTW, pengaturan tap highlight color tidak melakukan apa pun untuk menyelesaikan masalah ini untuk perangkat ini dan konfigurasi OS. Kami menjalankan Safari untuk android.

Untuk memastikan tap-highlight-colorproperti yang diganti berfungsi untuk Anda, pertimbangkan hal-hal ini terlebih dahulu:

Tidak berfungsi:
-webkit-user-modified: read-write-plaintext-only;
// Terkadang memicu keyboard asli untuk muncul saat mengklik elemen

.class: aktif, .class: focus {-webkit-tap-highlight-color: rgba (0,0,0,0); }
// Ini tidak bekerja jika didefinisikan untuk negara bagian

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

Kasing ini berfungsi untuk Android dari v2.3 hingga v4.x bahkan dalam aplikasi PhongeGap. Saya mengujinya di Galaxy Y dengan Android 2.3.3, di Nexus 4 dengan Android 4.2.2 dan di Galaxy Note 2 dengan Android 4.1.2. Jadi jangan mendefinisikannya untuk status hanya untuk elemen itu sendiri.

Gunakan kode di bawah ini dalam file CSS

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

Ini bekerja untuk saya. Saya harap ini berhasil untuk Anda.

Ini tidak berfungsi untuk saya pada tautan Area Peta Gambar, satu-satunya solusi yang berfungsi adalah menggunakan javascript dengan menangkap acara ontouchend dan mencegah perilaku browser default dengan mengembalikan false pada penangan.

dengan jQuery:

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

Saya hanya ingin berbagi pengalaman saya. Saya tidak benar-benar membuat ini bekerja, dan saya ingin menghindari css- * yang lambat. Solusi saya adalah mengunduh Reset CSS v2.0 Eric Meyer yang lama ( http://meyerweb.com/eric/tools/css/reset/ ) dan menambahkan yang ini ke proyek phonegap saya. Saya kemudian menambahkan:

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

Menurut pengalaman saya, ini adalah pendekatan yang lebih cepat ke *, tetapi juga merupakan pendekatan untuk bug yang tidak terlalu aneh. Kombinasi tap-highlight, -webkit-user-modifikasikan: read-write-plaintext-only dan penonaktifan, misalnya penyorotan teks, telah memberi kami banyak headaces. Salah satu yang terburuk adalah input keyboard tiba-tiba berhenti bekerja dan visualisasi keyboard lambat.

Selesaikan penyetelan ulang CSS dengan sorotan oranye dinonaktifkan:

/**
 * 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;
}

Saya telah mencoba yang ini dan bekerja dengan baik: -

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

Ini akan berfungsi tidak hanya untuk ketukan, tetapi juga untuk mengarahkan kursor:

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"                 

 />

Ini berfungsi untuk saya di Ionic, cukup taruh di file CSS untuk ditimpa

:focus {
    outline-width: 0px;
}

Jika desain tidak menggunakan garis besar, ini harus dilakukan:

*, *::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;
}

Coba kode berikut yang menonaktifkan garis batas

garis besar: tidak ada! penting;