Désactiver orange contour sélectionner sur la focus
Je suis codage d'une application à l'aide de jQuery, jqTouch et phonegap et ont couru à travers un problème persistant qui se produit lorsqu'un utilisateur soumet un formulaire en utilisant le bouton "Aller" sur le clavier virtuel.
Bien qu'il est facile d'obtenir le curseur pour vous déplacer dans le formulaire de saisie de l'élément en utilisant $('#input_element_id').focus()
, l'orange contour de mettre en évidence retourne toujours vers le dernier élément d'entrée sur le formulaire. (Le point culminant ne s'affiche pas lorsque le formulaire est soumis en utilisant le formulaire bouton "soumettre".)
Ce dont j'ai besoin est de trouver un moyen soit de désactiver l'orange complètement ou bien de la faire bouger à la même entrée de l'élément le curseur.
Jusqu'à présent, j'ai essayé d'ajouter ce qui suit à mon CSS:
.class_id:focus {
outline: none;
}
Cela fonctionne dans Chrome mais pas sur l'émulateur ou sur mon téléphone. J'ai aussi essayé de l'édition de jqTouch theme.css
à lire:
ul li input[type="text"] {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); and
-webkit-focus-ring-color: rgba(0, 0, 0, 0);
}
Avec aucun effet.
J'ai aussi essayé de chacun des ajouts suivants à la AndroidManifest.xml
fichier:
android:imeOptions="actionNone"
android:imeOptions="actionSend|flagNoEnterAction"
android:imeOptions="actionGo|flagNoEnterAction"
Aucun n'a aucun effet.
Mise à jour: j'ai fait un peu plus de dépannage et de date trouvé:
-
Le contour de la propriété ne fonctionne que sur Chrome, pas sur le navigateur Android.
-
La
-webkit-tap-highlight-color
de la propriété, dans les faits, le travail sur le navigateur Android, mais pas sur Chrome. Il désactive le clou sur le se concentrer ainsi que sur la saignée. -
La
-webkit-focus-ring-color
propriété ne semble pas fonctionner sur navigateur.
Vous devez vous connecter pour publier un commentaire.
Essayer:
dans votre fichier css.
Il a travaillé pour moi !
De travail sur Android par Défaut, Android, Chrome et apple Safari 100%
Supprimer l'orange box sur le focus d'entrée pour les Androïdes
tap-highlight-color pour la plupart des versions
l'utilisateur de modifier pour 4.0.4
Essayez de Concentrer la Ligne
Être conscient que l'utilisation de cette CSS
-webkit-user-modify: read-write-plaintext-only;
VA supprimer cette horrible mettez en surbrillance 'bug' - MAIS il peut tuer vos appareils capacité à fournir un clavier. Pour nous, fonctionnant sous Android 4.0.3 sur une Samsung Tab 2, on ne peut plus obtenir le clavier numérique. Même en utilisant type='nombre' &/ou type='téléphone' . Très frustrant!BTW, le réglage appuyez sur surbrillance la couleur n'a rien fait pour résoudre ce problème pour cet appareil et en OS config. Nous sommes en cours d'exécution Safari pour android.
Assurez-vous que le
tap-highlight-color
propriété primordial fonctionne pour vous, pensez à ces choses d'abord:Ce cas de travaux pour les Android à partir de v2.3 v4.x même dans un PhongeGap application. Je l'ai testé sur Galaxy Y avec Android 2.3.3, sur le Nexus 4 avec Android 4.2.2 et sur le Galaxy Note 2 avec Android 4.1.2. Donc ne pas le définir pour les états que pour l'élément lui-même.
Utiliser le code ci-dessous dans le fichier CSS
C'est le travail pour moi. J'espère que cela fonctionne pour vous.
Cela n'a pas fonctionné pour moi sur l'Image de la Carte de la Zone de liens, la seule solution a été d'utiliser le javascript par la capture de la ontouchend de l'événement et de la prévention de comportement par défaut du navigateur, en retournant false sur le gestionnaire.
avec jQuery:
Je voulais juste partager mon expérience. Je n'ai pas vraiment d'obtenir ce travail, et je voulais éviter la lenteur de la css-*. Ma solution a été de télécharger le bon vieux Eric Meyer Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) et d'ajouter celui-ci à mon projet phonegap. J'ai ensuite ajouté:
Dans mon expérience, c'est une approche plus rapide à l' *, mais c'est aussi une approche pour le moins bizarre de bugs. Combinaison de tap-highlight, -webkit-user-modifier: lire-écrire-texte en clair uniquement et la désactivation de pour exemple de texte en soulignant nous ont fourni beaucoup de headaces. Le pire étant que, soudain, un clavier de saisie des arrêts de travail et de ralentir le clavier de visualisation.
Complet CSS-reset avec le orange désactivé:
J'ai essayé celui-ci et a bien fonctionné :-
HTML:-
css
Cela fonctionne non seulement pour les robinets, mais hover ainsi:
Ce travail pour moi dans Ionique, il suffit de mettre dans le fichier CSS pour remplacer
Si le design n'est pas l'utilisation de contours, ce qui devrait faire la job:
Essayer de code suivant désactive la frontière contour