Désactiver Android superpositions de saisie du navigateur?
J'ai une page Web avec quelques entrées de texte. Le navigateur Android (au moins sur Android 2.3.4 qui est tout ce que j'ai maintenant)) semble superposer son propre contrôle sur l'entrée sur la page. sur le focus.
Le problème est que le contrôle superposé est un rectangle blanc et il a l'air moche. Existe-t-il un moyen de le désactiver ou de le styliser d'une manière ou d'une autre?
MISE À JOUR:
Voici un exemple de l'émulateur Android:
Les coins arrondis et l'arrière-plan sont perdus. Sur le périphérique réel, 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:
Enfin, j'ai résolu ce problème pour les appareils Android 2.3.
Il n'est pas possible de vraiment supprimer la superposition, mais il est possible de déplacer la superposition en dehors de la fenêtre.
La superposition tente de se positionner à la même position que le champ de saisie. Il copie la largeur et le décalage de position que vous affectez avec
position:relative
et
top:-10000px
Mais la superposition ne copie pas les décalages de position qui sont attribués via
-webkit-transform: translate3d()
Cela provoque plusieurs problèmes avec les bibliothèques JS comme iScroll.
Mais cela nous aide également à masquer 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. Vous utilisez maintenant 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 supprimera la surbrillance du robinet - [Android 4.0.3]
input{
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color:#3072af;
}
Je ne suis pas sûr que ce soit une solution de travail et une réponse, mais mes entrées ont commencé à jouer avec Android après avoir commenté celles-ci, qui ont toutes créé des ravages sur mon Android (HTC2 .3) entrées de texte et sélection
/* really bad */
-webkit-backface-visibility: hidden;
/* your normal bad */
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
Si vous voulez styliser les entrées par défaut, j'utilise celles-ci:
/* 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. Je remplace cependant beaucoup d'autres choses aussi.
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 au-dessus d'un élément de liste, qui, je pense, a l'air vraiment bien. Vous pouvez également ajouter des étiquettes aux entrées, mon exemple est configuré pour fonctionner avec le plug-in d'étiquette inField, vous avez donc déjà toutes ces classes à bord.
La capture d'écran est de mon Android HTC 2.3.5 et montre un type d'entrée = "recherche". C'est un filtre de recherche de liste, que j'ai supprimé de la plupart des JQM-css. Je l'ai supprimé du listview plus bas, l'a placé dans ma liste de formulaires, a ajouté une étiquette (ne peut pas voir si elle est active) et a supprimé tous les CSS, y compris les icônes.
Voici un exemple de la façon dont je fais mes formulaires de liste:
<ul data-role="listview" data-inset="true" class="inputList">
<li data-role="fieldcontain" data-icon="false" class="inField ui-btn ui-corner-top" data-theme="c">
<div class="ui-btn-inner" aria-hidden="true"><div class="ui-btn-text">
<label for="item">item</label>
<input type="text" name="item" id="item" />
</div></div>
</li>
<li data-role="fieldcontain" data-icon="false" class="inField ui-btn ui-corner-bottom" data-theme="c">
<div class="ui-btn-inner" aria-hidden="true"><div class="ui-btn-text">
<label for="item2">item2</label>
<input type="text" name="item2" id="item2" />
</div></div>
</li>
</ul>
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 tout cela est CSS. Si vous essayez de configurer cela et que cela semble minable, faites-le moi savoir.
Travailler comme ça a l'air très agréable sur mon HTC 2.3.4 Mon CSS a encore besoin d'un peu de polissage. Je dois réduire la largeur des entrées et aligner: centre, de sorte que les bordures de l'élément de liste ci-dessous restent visibles.
Autre que cela, ce serait une bonne solution pour crummy Android entrées. Il suffit de supprimer tous les JQM-CSS et de mettre un listview-li derrière.
Voici mon code:
input {
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
Je fais juste une supposition ici, et vous avez probablement déjà essayé, mais
-webkit-appearance: none;
peut faire l'affaire. Je n'ai même pas de périphérique Android, mais sur iphone qui résout la plupart des problèmes de style liés à l'entrée car il supprime complètement le style appliqué par le navigateur par défaut. Ça vaut le coup!
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color: rgba (0,0,0,0); style de contour: aucun;
Cela fonctionnera bien dans Android 4.0 mais lorsque vous utilisez ce code pour le champ de saisie numérique ne prend pas en charge bcoz de lecture-écriture-texte en clair uniquement, j'ai ce problème, veuillez suggérer à tout le monde.
Je confirme l'analyse macnerd du patch czuendorf. Ces comportements varient considérablement d'une Android à une autre. Je l'ai testée sur un véritable appareil Htc avec Android 4.0.3 et le contour a disparu (super!) mais cela ouvre de sérieux problèmes de clavier (je vois que la touche unique n'est pas affichée sur le terrain, 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 appareil. C'est dommage!
@czuendorf, 13 mai à 13:53: a aussi fonctionné pour moi (aussi Android 4.0).
Cependant ... si vous utilisez une entrée avec type = "nombre", le clavier numérique n'apparaît plus lorsque vous entrez dans le champ, mais le clavier normal s'affiche à la place.
Si vous supprimez -webkit-user-modify, le clavier de droite s'affiche à nouveau, mais l'élément d'entrée s'affiche avec une bordure pendant sa modification. Dans mon cas, la superposition d'entrée a gâché la mise en page (déplacé du contenu vers le bas et vers la droite), mais cela ne se produit plus avec ce nouveau code CSS.