Odaktaki turuncu anahat vurgusunu devre dışı bırakın

JQuery, jqTouch ve phonegap kullanarak bir uygulamayı kodluyorum ve kullanıcı sanal klavyedeki Git düğmesini kullanarak bir form gönderdiğinde ortaya çıkan kalıcı bir sorunla karşılaştım.

Kullanılarak imlecin uygun form giriş öğesine gitmesi kolay olsa da, $('#input_element_id').focus()turuncu anahat vurgusu her zaman formdaki son giriş öğesine geri döner. (Form gönder düğmesi kullanılarak form gönderildiğinde vurgu görünmez.)

İhtiyacım olan, turuncu vurguyu tamamen devre dışı bırakmanın veya imleçle aynı giriş öğesine hareket etmesini sağlamanın bir yolunu bulmak.

Şimdiye kadar, CSS'ime aşağıdakileri eklemeyi denedim:

.class_id:focus {
    outline: none;
}

Bu Chrome'da çalışıyor, ancak öykünücüde veya telefonumda çalışmıyor. Okumak theme.cssiçin jqTouch'ı düzenlemeyi de denedim :

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

Etkisiz. Ayrıca AndroidManifest.xmldosyaya aşağıdaki eklemelerin her birini denedim :

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

Hiçbirinin etkisi yok.

Güncelleme: Bununla ilgili biraz daha sorun giderme yaptım ve bugüne kadar buldum:

1. Anahat özelliği, Android tarayıcısında değil, yalnızca Chrome'da çalışır.

2. -webkit-tap-highlight-colorMülkiyet olmasa Chrome'da, Android tarayıcı üzerinde aslında çalışmalarında yapar. Vurguyu odaklamanın yanı sıra dokunmayı da devre dışı bırakır.

3. -webkit-focus-ring-colorMülkiyet iki tarayıcıda çalışma görünmüyor.

Deneyin:

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

Android Varsayılanı, Android Chrome ve iOS Safari% 100 üzerinde çalışın

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

css dosyanızda. Benim için çalıştı!

Android'ler için giriş odağındaki turuncu kutuyu kaldırın

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

çoğu sürüm için vurgulama rengine dokunun

4.0.4 için kullanıcı değişikliği

Odak Çizgisini Deneyin

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

Bu CSS'yi kullanmanın -webkit-user-modify: read-write-plaintext-only;o korkunç vurgu 'hatasını' ortadan kaldıracağını unutmayın - ANCAK cihazınızın belirli bir klavye sağlama yeteneğini öldürebilir. Samsung Tab 2'de Android 4.0.3 çalıştırdığımız için artık sayısal klavyeyi alamadık. Type = 'number' & / veya type = 'tel' kullanarak bile. Çok sinir bozucu! BTW, dokunma vurgulama rengini ayarlamak bu cihaz ve işletim sistemi yapılandırması için bu sorunu çözmek için hiçbir şey yapmadı. Android için Safari çalıştırıyoruz.

tap-highlight-colorÖzelliğin sizin için çalıştığından emin olmak için önce şu noktaları göz önünde bulundurun:

Çalışmıyor:
-webkit-user-değişiklik: salt metin okuma-yazma;
// Bazen öğeye tıklandığında yerel klavyenin açılır penceresini tetikler

.class: etkin, .class: odak {-webkit-tap-vurgulama-rengi: rgba (0,0,0,0); }
// Eyaletler için tanımlanmışsa çalışmıyor

Çalışma:
.class { -webkit-tap-highlight-color: rgba(0,0,0,0); }

Bu durum , bir PhongeGap uygulamasında bile v2.3'ten v4.x'e kadar Android için çalışır . Android 2.3.3 ile Galaxy Y'de, Android 4.2.2 ile Nexus 4'te ve Android 4.1.2 ile Galaxy Note 2'de test ettim. Bu nedenle, bunu yalnızca öğenin kendisi için durumlar için tanımlamayın .

CSS dosyasında aşağıdaki kodu kullanın

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

Benim için çalışıyor. Umarım senin için çalışır

Bu benim için Image Map Area bağlantılarında işe yaramadı, tek çalışan çözüm ontouchend olayını yakalayarak ve işleyicide false döndürerek varsayılan tarayıcı davranışını engelleyerek javascript kullanmaktı.

jQuery ile:

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

Sadece deneyimimi paylaşmak istedim. Bunu gerçekten çalıştırmadım ve yavaş css- *'den kaçınmak istedim. Benim çözümüm, eski Eric Meyer'in Reset CSS v2.0'ı ( http://meyerweb.com/eric/tools/css/reset/ ) indirmek ve bunu phonegap projeme eklemekti. Sonra ekledim:

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

Tecrübelerime göre bu, * için daha hızlı bir yaklaşım, ancak aynı zamanda daha az tuhaf hatalara da bir yaklaşım. Dokunarak vurgulama, -webkit-kullanıcı-değiştirme: salt metin okuma-yazma-yazma ve örneğin metin vurgulamanın devre dışı bırakılması, bize pek çok başlık sağladı. En kötülerinden biri, klavye girişinin aniden çalışmayı durdurması ve klavye görselleştirmesini yavaşlatmasıdır.

Turuncu vurgu devre dışı bırakılarak CSS sıfırlamayı tamamlayın:

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

Bunu denedim ve iyi çalıştım: -

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

Bu yalnızca musluklar için değil, fareyle üzerine gelme için de işe yarar:

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"                 

 />

Bu benim için Ionic'te çalışıyor, üzerine yazmak için CSS dosyası koymanız yeterli

:focus {
    outline-width: 0px;
}

Tasarım ana hatları kullanmıyorsa, bu işi yapmalıdır:

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

Kenar çizgisini devre dışı bırakan kodu izlemeyi deneyin

anahat: yok! önemli;