Styles Phonegap -webkit-user-select: aucun; désactiver le champ de texte

Question

Je suis assez nouveau à Phonegap. J'ai un problème lorsque la css par défaut utilisé dans un endroit propre Phonegap projet ne permettra pas d'entrée dans les champs de texte. J'ai rétréci vers le bas à une seule ligne de CSS:

* {
            -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
            -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
            -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
            -webkit-user-select: none;                 /* prevent copy paste, to allow, change 'none' to 'text' */

    }

Le problème est:

-webkit-user-select: none; 

Cela peut être trouvé dans www/index.css.

Semble complètement désactiver le champ de saisie n'est pas l'effet désiré.

J'ai aussi posté ce problème 2 fois avant, mais il a été fermé, je ne sais pas pourquoi... Mon problème a été fermé à cause d'un problème commun. Eh bien, tout ce que je peux dire à ce sujet est, je suppose que certains utilisateurs à stackoverflow ne pense pas que le CSS 3, Phonegap, HTML 5, et -webkit-user-select: est une situation commune. J'avais prie de différer.

Cependant, je peux voir aussi cette question posté ici, également à l'origine des problèmes dans Safari: Utilisateur de sélectionner:aucun causes champ de saisie pour être inaccessible sur Safari , Bien que légèrement différente.

Ma solution actuelle est ceci:

-webkit-user-select: text; /* changement de "aucun" à "texte" */

Juste encore curieux de savoir quelle est la solution la plus élégante pour activer la saisie de texte, mais encore de maintenir une partie de cette copie et la dernière fonctionnalité que Phonegap est d'essayer d'atteindre. Merci!

Answer 1

Essayez d'ajouter ceci à votre css:

 input {
    -webkit-user-select: auto !important;
}
 

Cela annulera la sélection de texte désactivée que vous avez définie pour chaque élément (via le sélecteur *) pour les champs de saisie.

Answer 2

Ajoutez simplement des règles au css de cette façon:

 *:not(input,textarea) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}
 

Answer 3

user-select peut causer des problèmes dans les éléments avec contenteditable = "true", il est donc préférable d'ajouter cela

   [contenteditable="true"] , input, textarea {
        -webkit-user-select: auto !important;
        -khtml-user-select: auto !important;
        -moz-user-select: auto !important;
        -ms-user-select: auto !important;
        -o-user-select: auto !important;
        user-select: auto !important;  
  }