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

Question

J'ai une page web avec du texte des entrées. Le navigateur Android (au moins sur Android 2.3.4, qui est tout ce que j'ai maintenant) semble superposition son propre contrôle sur l'entrée sur la page de discussion.

Le problème est que la superposition de contrôle est un rectangle blanc et il semble laid. Est-il un moyen de le désactiver, ou le style d'une certaine façon?

Mise à JOUR:

Voici un exemple à partir de l'émulateur Android:

Les coins arrondis et le fond sont perdus. Sur le périphérique, je n'ai même pas voir une bordure autour du contrôle.

Je devrais probablement mentionner que je suis à l'aide de jQuery Mobile. Mon appareil de test est un HTC Evo 4G.

Questions connexes:

L'entrée est de style différent sur l'objet

Entrée-Éléments dans les WebViews toujours le même style, si mis en évidence sur les Appareils HTC

Answer 1

Enfin, j'ai résolu ce problème pour Android 2.3 dispositifs.

Il n'est pas possible de supprimer la superposition, mais il est possible de déplacer la superposition en dehors de la fenêtre.

La superposition essaie de se positionner à la même position que le champ de saisie. La copie de la largeur et de la position offset qui vous permet d'assigner avec

position:relative

et

top:-10000px

Mais la superposition ne copie pas les décalages de position qui sont affectés par l'entremise de

-webkit-transform: translate3d()

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

Mais cela permet aussi de 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 à l'extérieur de la fenêtre d'affichage. La superposition des postes de lui-même à côté d'elle. Maintenant, vous utilisez translate3d() pour le déplacement de la vieille poste.

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

Answer 2

Le code suivant enlèvera le surlignage tactile

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

Answer 3

Pas sûr que c'est une solution de travail, et de la réponse, mais mon entrées commencé à jouer sur Android après avoir commenté ces, qui tous créé des ravages sur mon Android (HTC2.3) le texte des entrées 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 le style par défaut des entrées, je suis en utilisant ces:

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

Après avoir commenté le premier webkits, Android fonctionne ok pour moi. Je suis primordial beaucoup d'autres choses, trop bien.

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

Ce que j'ai fait avec mon entrées est de créer une listview, de mettre tous mes entrées dans la liste des éléments et de la bande d'entrée-JQM-CSS. Cela devrait vous donner une entrée transparents assis sur le dessus d'un élément de liste, ce qui je pense a l'air vraiment bon. Vous pouvez également ajouter des étiquettes pour les entrées, mon exemple est mis en place pour travailler avec l'intérieur de l'étiquette de plugin, vous avez toutes ces classes à bord déjà, trop.

La capture d'écran est à partir de mon Android 2.3.5 et montre un input type="search". C'est une liste de filtre de recherche, j'ai dépouillé de la plupart des JQM-css. J'ai supprimé de la liste plus bas, l'a placé dans ma forme de liste, ajout d'une étiquette (ne peut pas voir si elle est active) et dépouillé tous les CSS, y compris les icônes.

Voici un exemple de la façon dont je suis en train de faire ma liste-formes:

 <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 c'est tous les CSS. Si vous essayez de mettre en place et il semble moche, permettez-moi de savoir.

Travailler comme cela semble très bien sur mon HTC 2.3.4 Mon CSS a encore besoin de quelques polissage. J'ai besoin de diminuer les entrées de largeur et align: center, de sorte que les frontières de la liste ci-dessous de l'élément de rester visible.

Autres que que ce serait une belle solution minable Android entrées. Simplement enlever tous les JQM-CSS et mettre un listview-li derrière.

Answer 4

Voici mon code:

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

Answer 5

Je suis juste en train de deviner, 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 un iPhone qui règle la plupart des problèmes de style liés à la saisie, car il supprime complètement le style appliqué par le navigateur par défaut. Vaut le coup quand même!