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.css
zu 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.xml
Datei 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:
Die Gliederungseigenschaft funktioniert nur in Chrome, nicht im Android-Browser.
Die
-webkit-tap-highlight-color
Eigenschaft funktioniert tatsächlich im Android-Browser, jedoch nicht in Chrome. Es deaktiviert die Hervorhebung sowohl beim Fokussieren als auch beim Tippen.Die
-webkit-focus-ring-color
Eigenschaft scheint in keinem der Browser zu funktionieren.
Arbeiten Sie zu 100% mit Android Default, Android Chrome und iOS Safari
quelle
*
, können Sie nur verwendenbutton
, wenn Ihr Problem beispielsweise mit Schaltflächen ist.in Ihrer CSS-Datei. Es hat bei mir funktioniert!
quelle
Entfernen Sie das orangefarbene Feld am Eingabefokus für Androids
Tap-Highlight-Farbe für die meisten Versionen
Benutzeränderung für 4.0.4
quelle
Versuchen Sie es mit der Fokuslinie
quelle
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.quelle
tap-highlight-color
Berücksichtigen Sie zunächst die folgenden Punkte, um sicherzustellen, dass das Überschreiben der Eigenschaft für Sie funktioniert: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.
quelle
Verwenden Sie den folgenden Code in der CSS-Datei
Es ist Arbeit für mich. Ich hoffe es funktioniert für dich.
quelle
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:
quelle
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:
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:
quelle
Ich habe es versucht und gut funktioniert: -
HTML: -
CSS
quelle
Dies funktioniert nicht nur bei Wasserhähnen, sondern auch beim Schweben:
quelle
quelle
Diese Arbeit für mich in Ionic, einfach in CSS-Datei zum Überschreiben setzen
quelle
Wenn das Design keine Konturen verwendet, sollte dies folgende Aufgabe erfüllen:
quelle
Versuchen Sie, den folgenden Code zu verwenden, der die Rahmenkontur deaktiviert
quelle