Désactiver la surbrillance du contour orange lors de la mise au point

Je code une application à l'aide de jQuery, jqTouch et phonegap et j'ai rencontré un problème persistant qui survient lorsqu'un utilisateur soumet un formulaire à l'aide du bouton Go du clavier logiciel.

Bien qu'il soit facile de déplacer le curseur vers l'élément d'entrée de formulaire approprié à l'aide de $('#input_element_id').focus(), la surbrillance du contour orange revient toujours au dernier élément d'entrée du formulaire. (Le surlignage n'apparaît pas lorsque le formulaire est soumis à l'aide du bouton d'envoi du formulaire.)

Ce dont j'ai besoin est de trouver un moyen de désactiver complètement la surbrillance orange ou de la déplacer vers le même élément d'entrée que 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 également essayé d'éditer le jqTouch theme.csspour 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);
}

Sans effet. J'ai également essayé chacun des ajouts suivants au AndroidManifest.xmlfichier:

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

Aucun d'entre eux n'a d'effet.

Mise à jour: J'ai effectué plus de dépannage avec ceci et à ce jour, j'ai trouvé:

1. La propriété de contour fonctionne uniquement sur Chrome, pas sur le navigateur Android.

2. La -webkit-tap-highlight-colorpropriété fonctionne en fait sur le navigateur Android, mais pas sur Chrome. Il désactive la mise en évidence sur la mise au point ainsi que sur le tapotement.

3. La -webkit-focus-ring-colorpropriété ne semble fonctionner sur aucun des deux navigateurs.

Essayer:

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

Fonctionne à 100% sur Android par défaut, Android Chrome et 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);  
} 

dans votre fichier css. Cela a fonctionné pour moi!

Supprimez la case orange sur le focus d'entrée pour les androïdes

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

tap-highlight-color pour la plupart des versions

modifier par l' utilisateur pour 4.0.4

Essayez pour Focus Line

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

Sachez que l'utilisation de ce CSS -webkit-user-modify: read-write-plaintext-only;supprimera cet horrible «bogue» de surbrillance - MAIS cela peut tuer la capacité de votre appareil à fournir un clavier spécifique. Pour nous exécutant Android 4.0.3 sur une Samsung Tab 2, nous ne pouvions plus obtenir le clavier numérique. Même en utilisant type = 'number' & / ou type = 'tel'. Très frustrant! BTW, le réglage de la couleur de surbrillance du robinet n'a rien fait pour résoudre ce problème pour cet appareil et la configuration du système d'exploitation. Nous utilisons Safari pour Android.

Pour vous assurer que le tap-highlight-colorremplacement de propriété fonctionne pour vous, considérez d'abord ces éléments:

Ne fonctionne pas:
-webkit-user-modify: lecture-écriture-clair uniquement;
// Il déclenche parfois le pop-up du clavier natif en cliquant sur l'élément

.class: active, .class: focus {-webkit-tap-highlight-color: rgba (0,0,0,0); }
// Cela ne fonctionne pas s'il est défini pour les états

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

Ce cas fonctionne pour Android de la v2.3 à la v4.x même dans une application PhongeGap. Je l'ai testé sur Galaxy Y avec Android 2.3.3, sur Nexus 4 avec Android 4.2.2 et sur Galaxy Note 2 avec Android 4.1.2. Ne le définissez donc pas uniquement pour les états de l'élément lui-même.

Utilisez le code ci-dessous dans le fichier CSS

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

C'est du travail pour moi. J'espère que cela fonctionnera pour vous.

Cela ne fonctionnait pas pour moi sur les liens de la zone de carte d'image, la seule solution de travail était d'utiliser javascript en capturant l'événement ontouchend et en empêchant le comportement par défaut du navigateur en retournant false sur le gestionnaire.

avec jQuery:

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

Je voulais juste partager mon expérience. Je n'ai pas vraiment réussi à faire fonctionner cela et je voulais éviter le lent css- *. Ma solution était 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é:

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

D'après mon expérience, c'est une approche plus rapide du *, mais c'est aussi une approche des bogues moins étranges. La combinaison de tap-highlight, -webkit-user-modify: lecture-écriture-texte en clair uniquement et la désactivation de la mise en évidence de texte par exemple nous a fourni beaucoup de headaces. L'un des pires est que la saisie au clavier cesse soudainement de fonctionner et ralentit la visualisation du clavier.

Réinitialisation complète du CSS avec la surbrillance orange désactivée:

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

J'ai essayé celui-ci et j'ai bien fonctionné: -

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

Cela fonctionnera non seulement pour les robinets, mais également pour le survol:

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"                 

 />

Cela fonctionne pour moi dans Ionic, il suffit de mettre un fichier CSS à écraser

:focus {
    outline-width: 0px;
}

Si la conception n'utilise pas de contours, cela devrait faire le travail:

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

Essayez de suivre le code qui désactive le contour de la bordure

aperçu: aucun! important;