Désactiver les superpositions d’entrée du navigateur Android?

J’ai une page Web avec des entrées de texte. Le navigateur Android (au moins sur Android 2.3.4, tout ce que je possède maintenant) semble superposer son propre contrôle sur l’entrée de la page sur le focus.

Le problème est que le contrôle superposé est un rectangle blanc et il a l’air moche. Y a-t-il un moyen de le désactiver ou de le styler d’une manière ou d’une autre?

METTRE À JOUR:

Voici un exemple de l’émulateur Android:

entrer la description de l'image ici

Les coins arrondis et l’arrière-plan sont perdus. Sur le périphérique actuel, je ne vois même pas de bordure autour du contrôle.

Je devrais probablement mentionner que j’utilise jQuery Mobile. Mon appareil de test est un HTC Evo 4G.

Questions connexes:

L’entrée a un style différent sur le focus

Les éléments d’entrée dans WebViews ont toujours le même style s’ils sont mis en évidence sur les appareils HTC

Enfin, j’ai résolu ce problème pour les appareils Android 2.3.

Il est impossible de supprimer réellement la superposition, mais il est possible de déplacer la superposition en dehors de la fenêtre d’affichage.

La superposition tente de se positionner dans la même position que le champ de saisie. Il copie la largeur et le décalage de position que vous atsortingbuez avec

 position:relative 

et

 top:-10000px 

Mais la superposition ne copie pas les décalages de position atsortingbués via

 -webkit-transform: translate3d() 

Cela provoque plusieurs problèmes avec les bibliothèques JS comme iScroll.

Mais cela nous aide aussi à cacher la superposition:

 input[type="password"], input[type="text"]{ position:relative; top:-10000px; -webkit-transform: translate3d(0, 10000px, 0); } 

Vous placez le champ de saisie en dehors de la fenêtre. La superposition se positionne à côté d’elle. Maintenant, vous utilisez translate3d () pour le déplacer vers l’ancienne position.

Nous utilisons déjà cette solution dans notre framework web mobile “qooxdoo Mobile”: http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fform

Le code suivant va supprimer le surlignage – [Android 4.0.3]

 input{ -webkit-user-modify: read-write-plaintext-only; -webkit-tap-highlight-color:#3072af; } 

Pas sûr que ce soit une solution de travail et une réponse, mais mes entrées ont commencé à jouer sur Android après les avoir commentées, ce qui a fait des ravages sur mes entrées de texte Android (HTC2.3) et sélectionne

 /* really bad */ -webkit-backface-visibility: hidden; /* your normal bad */ -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); 

Si vous voulez mettre en forme les entrées par défaut, j’utilise les éléments suivants:

 /* native placeholder styling */ ::-webkit-input-placeholder { color:#555555; } :-moz-placeholder { color:#555555; } .inField label { color:#555555; cursor: text; } 

Après avoir commenté les premiers webkits, Android fonctionne bien pour moi. Cependant, je surpasse beaucoup d’autres choses.

Consultez également la capture d’écran ci-dessous:

Ce que j’ai fait avec mes entrées, c’est créer une vue de liste, mettre toutes mes entrées dans des éléments de liste et supprimer toutes les entrées-JQM-CSS. Cela devrait vous donner une entrée transparente située au-dessus d’un élément de liste, ce qui, à mon avis, est vraiment bon. Vous pouvez également append des étiquettes aux entrées, mon exemple est configuré pour fonctionner avec le plug-in label inField. Vous disposez donc de toutes ces classes également.

La capture d’écran provient de mon Android HTC 2.3.5 et affiche un type d’entrée = “search”. C’est un filtre de recherche listview, que j’ai supprimé de la plupart des JQM-css. Je l’ai retiré de la liste, je l’ai placé dans ma liste de formulaires, j’ai ajouté une étiquette (impossible à voir s’il est actif) et j’ai supprimé tous les CSS, y compris les icons.

Voici un exemple de la façon dont je fais mes listes:

  

CSS:

 .inputList li div.ui-btn-inner { background: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; } .inputList label { margin: 3px 0 0 !important; } // styling of text inputs! .inputList input.ui-input-text, .inputList textarea.ui-input-text { width: 93%; margin-left: 1%; padding: 0.6em 0; text-indent: 80px; /* hard-coded - doesn't work on Android */ border-width: 0px; background: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -moz-border-radius:0px; -webkit-border-radius: 0px; border-radius: 0px; } .inputList .ui-li-divider:not(.input-divider), .inputList .ui-li-static, .inputList .ui-li-has-alt, .inputList .ui-link-inherit, .inputList .ui-btn-icon-notext .ui-btn-inner { padding: 0px !important; } // labels, from inField label plugin, but not active .inField { position:relative } .inField label { line-height: 2.25em; vertical-align: middle; position:absolute; left:8pt; width: inherit !important; } 

J’espère que c’est tout CSS. Si vous essayez de régler cela et que cela a l’air minable, faites le moi savoir.

Travailler comme ça semble très bien sur mon HTC 2.3.4 Mon CSS a encore besoin d’être poli. Je dois diminuer la largeur des entrées et aligner: centrer pour que les bordures de l’élément de liste ci-dessous restnt visibles.

En dehors de cela, ce serait une bonne solution pour réduire les entrées Android. Décapez simplement tous les fichiers JQM-CSS et placez un listview-li derrière.

Entrée du filtre de recherche Android listview

Voici mon code:

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

Je prends juste une conjecture ici, et vous avez probablement déjà essayé, mais

 -webkit-appearance: none; 

peut faire l’affaire. Je n’ai même pas d’appareil Android, mais sur iphone qui sortinge la plupart des problèmes de style liés aux entrées car il supprime complètement le style appliqué par défaut du navigateur. Vaut le coup quand même!

 -webkit-user-modify: read-write-plaintext-only; 

-webkit-tap-highlight-color: rgba (0,0,0,0); style de contour: aucun;

Cela fonctionnera très bien dans Android 4.0, mais lorsque vous utilisez ce code pour un champ d’entrée numérique, il ne prend pas en charge bcoz de lecture-écriture-texte en clair uniquement, j’ai ce problème, s’il vous plaît.

@czuendorf, 13 mai à 13h53: J’ai aussi travaillé pour moi (aussi Android 4.0).

Cependant, si vous utilisez une entrée avec type = “number”, le clavier numérique ne s’affiche plus lorsque vous entrez dans le champ, mais le clavier normal est affiché à la place.

Si vous supprimez -webkit-user-modify, le clavier de droite s’affiche à nouveau, mais l’élément d’entrée est affiché avec une bordure en cours d’édition. Dans mon cas, la superposition d’entrée a gâché la mise en page (déplacé du contenu vers le bas et à droite), mais cela ne se produit plus avec ce nouveau code CSS.

Je confirme l’parsing macnerd du patch czuendorf. Ces comportements varient considérablement d’une version Android à l’autre. Je l’ai testé sur un vrai périphérique HTC avec Android 4.0.3 et le contour a disparu (génial!) Mais cela ouvre de sérieux problèmes de clavier (je vois que le seul appui sur une touche n’est pas affiché dans le champ, et d’autres comportements étranges …) . Dans l’émulateur, aucun problème de clavier ne se produit. Je n’ai trouvé aucune solution pour le vrai périphérique. C’est dommage!