it-swarm.com.de

Deaktivieren Sie die orangefarbene Konturmarkierung im Fokus

Ich programmiere eine App mit jQuery, jqTouch und phonegap und bin auf ein anhaltendes Problem gestoßen, das auftritt, wenn ein Benutzer ein Formular über die Schaltfläche "Gehe zu" auf der Bildschirmtastatur absendet.

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

Was ich brauche, ist eine Möglichkeit zu finden, um entweder die orangefarbene Hervorhebung vollständig zu deaktivieren oder sie auf dasselbe Eingabeelement wie den Cursor zu verschieben.

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

.class_id:focus {
    outline: none;
}

Dies funktioniert in Chrome, aber nicht im Emulator oder auf meinem Handy. Ich habe auch versucht, das jqTouch theme.css Zu bearbeiten, um Folgendes 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 Datei AndroidManifest.xml Ausprobiert:

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

Keiner davon hat irgendeine Wirkung.

Update: Ich habe noch ein paar Fehler behoben und bis jetzt festgestellt:

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

  2. Die Eigenschaft -webkit-tap-highlight-color Funktioniert in der Tat im Browser Android), jedoch nicht in Chrome. Sie deaktiviert die Hervorhebung sowohl beim Fokussieren als auch beim Tippen.

  3. Die Eigenschaft -webkit-focus-ring-color Scheint in beiden Browsern nicht zu funktionieren.

104
eggdeng

Versuchen:

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

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

35
yesil

Arbeiten Sie an Android Standard, Android Chrome und 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;
} 
35
sergey_c

Entfernen Sie das orangefarbene Kästchen am Eingabefokus für Androiden

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

Tipp-Highlight-Farbe für die meisten Versionen

Benutzer ändern für 4.0.4

18
oori

Versuchen Sie es mit der Fokuslinie

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

Beachten Sie, dass mit diesem CSS -webkit-user-modify: read-write-plaintext-only; BEHEBT DEN SCHRECKLICHEN HIGHLIGHTS-FEHLER, ABER es kann Ihre Geräte daran hindern, eine bestimmte Tastatur bereitzustellen. Für uns lief Android 4.0.3 auf einem Samsung Tab 2, wir konnten die numerische Tastatur nicht mehr bekommen. Selbst wenn wir type = 'number' &/oder type = 'tel' benutzen. Sehr frustrierend! Übrigens hat das Festlegen der Farbe für die Hervorhebung durch Tippen nichts zur Behebung dieses Problems für dieses Gerät und die Betriebssystemkonfiguration beigetragen. Wir führen Safari für Android aus.

10
Fivebears

Um sicherzustellen, dass die überschreibende Eigenschaft tap-highlight-color Für Sie funktioniert, müssen Sie zunächst die folgenden Punkte berücksichtigen:

Funktioniert nicht:
- webkit-user-modify: Nur-Lese-Schreib-Nur-Text;
// Es kann vorkommen, dass die native Tastatur beim Klicken auf das Element ein Popup anzeigt

.class: active, .class: focus {-webkit-tap-highlight-color: rgba (0,0,0,0); }
// Es funktioniert nicht, wenn es für Status 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 auch 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 Also definieren Sie es nicht nur für das Element für Status selbst.

7
RynoRn

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.

6
Kailas

Ich wollte nur meine Erfahrungen teilen. Ich habe das nicht wirklich zum Laufen gebracht und wollte das langsame CSS- * vermeiden. Meine Lösung war, das gute alte Reset CSS v2.0 von Eric Meyer herunterzuladen ( http://meyerweb.com/eric/tools/css/reset/ ) 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 eine schnellere Herangehensweise an die *, aber es ist auch eine Herangehensweise an weniger seltsame Fehler. Die Kombination von Tap-Highlight, Webkit-User-Modify: Nur-Lese-Schreib-Nur-Text und das Deaktivieren von beispielsweise Text-Hervorhebungen hat uns viele Probleme bereitet. Eines der schlimmsten ist, dass die Tastatureingabe plötzlich nicht mehr funktioniert und die Tastaturvisualisierung langsamer wird.

Vollständiger CSS-Reset mit deaktivierter oranger Markierung:

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

Bei Links im Image Map-Bereich funktionierte dies nicht. Die einzige funktionierende Lösung bestand darin, Javascript zu verwenden, indem das Ereignis uponuchend erfasst und das Verhalten des Standardbrowsers verhindert wurde, indem auf dem Handler false zurückgegeben wurde.

mit jQuery:

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

Ich habe es versucht und es 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);
}
1
Ashoka Mondal

Dies funktioniert nicht nur für Taps, sondern auch für Hover:

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

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

:focus {
    outline-width: 0px;
}
1
Snow Bases

Wenn das Design keine Konturen verwendet, sollte dies die 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;
}
0
Robert Richter
<EditText
            Android:id="@+id/edittext"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"  
            Android:background="@Android:drawable/editbox_background_normal"                 

 />
0
Android