Deaktivieren Sie die orangefarbene Konturmarkierung im Fokus

106

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.

Eggdeng
quelle

Antworten:

210

Versuchen:

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
-webkit-tap-highlight-color: transparent;  // i.e. Nexus5/Chrome and Kindle Fire HD 7''
Baggz
quelle
10
es funktioniert nicht mit Android 4.0.4 - hat jemand das gleiche erlebt? (es funktioniert auf früheren Versionen und 4.1)
最 白 目
6
android 4.0.4 funktioniert mit: -webkit-user-modify: read-write-plaintext-only;
Oori
@oori tut es jedoch, dass iOS "kaputt geht", indem die Tastatur auftaucht.
Max
@Max, dein Kommentar ist nicht klar. unter iOS - natürlich erscheint die Tastatur, sobald Sie sich auf einen Eingabe- / Textbereich konzentrieren. Bitte erklären Sie
oori
4
@oori Okay? Das hilft nicht bei nicht eingegebenen Nicht-Textbereich-Elementen, die Gegenstand meines Kommentars waren.
Max
43

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;
} 
sergey_c
quelle
1
Dies sollte die ausgewählte Antwort sein
mlg87
Anstatt zu verwenden *, können Sie nur verwenden button, wenn Ihr Problem beispielsweise mit Schaltflächen ist.
Brian Burns
35
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
} 

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

Ja
quelle
18

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

oori
quelle
Ich suche seit einigen Tagen nach einem Fix [Android 4.1.2]. Dies ist der einzige, der funktioniert hat. Ein großes Dankeschön!
Cassi.lup
@Ben die obige Antwort funktioniert sicher ... machen Sie eine plunkr / jsfiddle mit Ihrem Code, damit wir Sie sehen und unterstützen können.
Oori
@Ben User-Modify für 4.0.4 ist keine gute Lösung, keine andere Lösung, wenn Sie dann haben, teilen Sie es bitte.
Amit
12

Versuchen Sie es mit der Fokuslinie

body, textarea:focus, input:focus{
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
Ravi Desai
quelle
Nur funktionierende Lösung für Android 4.2-Geräte und ähnliches.
andreszs
10

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.

Fünf Bären
quelle
wie Sie Safari für Android ausführen.
Amit
Hey @Amit, es ist lange her, seit ich darauf geantwortet habe! Ich würde sagen, es lief direkt aus dem Gerät als Werksstandard ... Tab2 war zu dieser Zeit ziemlich neu auf dem Markt.
Fivebears
7

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.

RynoRn
quelle
1
Dieser Tipp hat es für mich mit einem WebView unter Android 2.3 zum Laufen gebracht.
Angelgelov
WOOOOW Dieser hat funktioniert !! (Android 4.1.2) Verdammt! Ich hasse Webview-Fragmentierung !!
Jemand irgendwo
6

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.

Kailas
quelle
2

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;
});
Roberto Andrade
quelle
2

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;
}
Sindre
quelle
1

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);
}
Ashoka Mondal
quelle
-Webkit-Tap-Highlight-Farbe: transparent; -> toll, gelöst für zB Nexus5 (Chrome) und Kindle Fire HD 7 ''. Alle anderen Optionen haben für diese Geräte / Browser nicht geholfen. Pass auf, Firefox und Opera brauchten die Leitung auf Nexus5 nicht.
Michael Biermann
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;
}
Abksharma
quelle
0
<EditText
            android:id="@+id/edittext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"  
            android:background="@android:drawable/editbox_background_normal"                 

 />
Android
quelle
0

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

:focus {
    outline-width: 0px;
}
Schneebasen
quelle
-1

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;
}
Robert Richter
quelle
-1

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

Gliederung: keine! wichtig;

Rinkesh
quelle