Deaktivieren Sie die orangefarbene Konturmarkierung im Fokus

Ich codiere eine App mit jQuery, jqTouch und phonegap und bin auf ein anhaltendes Problem gestoßen, das auftritt, wenn ein Benutzer ein Formular mit der Go-Taste auf der Softtastatur sendet.

Obwohl es einfach ist, den Cursor mithilfe von zum entsprechenden Formulareingabeelement zu bewegen, $('#input_element_id').focus()kehrt die orangefarbene Umrissmarkierung immer zum letzten Eingabeelement im Formular zurück. (Die Markierung wird nicht angezeigt, wenn das Formular über die Schaltfläche zum Senden des Formulars gesendet wird.)

Ich muss einen Weg finden, um entweder die orangefarbene Markierung vollständig zu deaktivieren oder sie zum selben Eingabeelement wie den Cursor zu bewegen.

Bisher habe ich versucht, meinem CSS Folgendes hinzuzufügen:

.class_id:focus {
    outline: none;
}

Dies funktioniert in Chrome, jedoch nicht auf dem Emulator oder auf meinem Telefon. Ich habe auch versucht, das jqTouch theme.csszu bearbeiten, um zu lesen:

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

Ohne Wirkung. Ich habe auch jede der folgenden Ergänzungen der AndroidManifest.xmlDatei versucht :

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

Nichts davon hat irgendeine Wirkung.

Update: Ich habe weitere Fehlerbehebungsmaßnahmen durchgeführt und bisher festgestellt:

1. Die Gliederungseigenschaft funktioniert nur in Chrome, nicht im Android-Browser.

2. Die -webkit-tap-highlight-colorEigenschaft funktioniert tatsächlich im Android-Browser, jedoch nicht in Chrome. Es deaktiviert die Hervorhebung sowohl beim Fokussieren als auch beim Tippen.

3. Die -webkit-focus-ring-colorEigenschaft scheint in keinem der Browser zu funktionieren.

Versuchen:

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

Arbeiten Sie zu 100% mit Android Default, Android Chrome und iOS Safari

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

in Ihrer CSS-Datei. Es hat bei mir funktioniert!

Entfernen Sie das orangefarbene Feld am Eingabefokus für Androids

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

Tap-Highlight-Farbe für die meisten Versionen

Benutzeränderung für 4.0.4

Versuchen Sie es mit der Fokuslinie

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

Beachten Sie, dass die Verwendung dieses CSS -webkit-user-modify: read-write-plaintext-only;diesen schrecklichen Highlight-Fehler beseitigt - ABER es kann die Fähigkeit Ihres Geräts beeinträchtigen, eine bestimmte Tastatur bereitzustellen. Für uns mit Android 4.0.3 auf einem Samsung Tab 2 konnten wir die Zifferntastatur nicht mehr bekommen. Auch mit type = 'number' & / oder type = 'tel'. Sehr frustrierend! Übrigens hat das Einstellen der Hervorhebungsfarbe für Tippen nichts zur Behebung dieses Problems für dieses Gerät und die Betriebssystemkonfiguration beigetragen. Wir führen Safari für Android aus.

tap-highlight-colorBerücksichtigen Sie zunächst die folgenden Punkte, um sicherzustellen, dass das Überschreiben der Eigenschaft für Sie funktioniert:

Funktioniert nicht:
-webkit-user-modify: read-write-plaintext-only;
// Manchmal wird die native Tastatur beim Klicken auf das Element angezeigt

.class: active, .class: focus {-webkit-tippen-hervorheben-farbe: rgba (0,0,0,0); }
// Es funktioniert nicht, wenn es für Zustände definiert ist

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

Dieser Fall funktioniert für Android von v2.3 bis v4.x sogar in einer PhongeGap-Anwendung. Ich habe es auf Galaxy Y mit Android 2.3.3, auf Nexus 4 mit Android 4.2.2 und auf Galaxy Note 2 mit Android 4.1.2 getestet. So definiert es nicht für Staaten nur für das Element selbst.

Verwenden Sie den folgenden Code in der CSS-Datei

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

Es ist Arbeit für mich. Ich hoffe es funktioniert für dich.

Dies funktionierte bei Image Map Area-Links nicht. Die einzige funktionierende Lösung bestand darin, Javascript zu verwenden, indem das Ereignis ontouchend erfasst und das Standardverhalten des Browsers verhindert wurde, indem im Handler false zurückgegeben wurde.

mit jQuery:

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

Ich wollte nur meine Erfahrungen teilen. Ich habe das nicht wirklich zum Laufen gebracht und wollte das langsame CSS- * vermeiden. Meine Lösung bestand darin, das Reset CSS v2.0 des guten alten Eric Meyer ( http://meyerweb.com/eric/tools/css/reset/ ) herunterzuladen und dieses meinem Phonegap-Projekt hinzuzufügen. Ich fügte dann hinzu:

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

Nach meiner Erfahrung ist dies ein schnellerer Ansatz für das *, aber es ist auch ein Ansatz für weniger seltsame Fehler. Die Kombination von Tap-Highlight, -Webkit-User-Modify: Nur-Lese-Schreiben-Klartext und das Deaktivieren von beispielsweise Text-Hervorhebungen haben uns viele Überschriften beschert. Eines der schlimmsten ist, dass die Tastatureingabe plötzlich nicht mehr funktioniert und die Tastaturvisualisierung verlangsamt wird.

Schließen Sie den CSS-Reset mit deaktivierter orangefarbener Markierung ab:

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

Ich habe es versucht und gut funktioniert: -

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

Dies funktioniert nicht nur bei Wasserhähnen, sondern auch beim Schweben:

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"                 

 />

Diese Arbeit für mich in Ionic, einfach in CSS-Datei zum Überschreiben setzen

:focus {
    outline-width: 0px;
}

Wenn das Design keine Konturen verwendet, sollte dies folgende Aufgabe erfüllen:

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

Versuchen Sie, den folgenden Code zu verwenden, der die Rahmenkontur deaktiviert

Gliederung: keine! wichtig;