Faire un champ de saisie de texte look désactivé, mais la loi sur readonly

J'ai un champ de saisie HTML que je veux que l'utilisateur soit en mesure de voir, mais pas de le modifier. Si je marque le champ comme "handicapées", elle n'est pas soumise avec le reste de la forme. Si je marque comme 'readonly', il se comporte comme ce que je veux, mais encore semble activé (au moins sur Chrome).

Fondamentalement, je veux que le champ de saisie à look comme un champ désactivé, mais se comporter comme un champ en lecture seule. Est-ce possible?

Grâce.

edit: Aussi, si je le marquer comme 'readonly', il est toujours possible de modifier sa valeur en double-cliquant dessus et en sélectionnant quelque chose qui était déjà là.

InformationsquelleAutor numegil | 2011-10-12
  1. 8

    Ici est solution de contournement: Vous avez entrée désactivé où vous voulez ( juste pour l'affichage de la valeur ) et ont une face cachée de l'entrée avec le nom et la valeur dont vous avez besoin.

    • Notez bien, que cela ne va pas empêcher l'altération de la forme. C'est tout juste l'air. Afin de voir cette question pour la protection contre la falsification.
    • fonctionne très bien, merci!
    • Pas très élégant - pas de votre faute! - mais peut-être la seule solution
    • Malheureusement, vous vous retrouvez avec des champs supplémentaires qui provoque des problèmes d' (HDIV)
    InformationsquelleAutor simoncereska
  2. 4

    J'ai eu un problème similaire avec la JSF dans lequel un champ caché travaillé pour la persistance de la valeur que j'ai besoin, mais de la valeur en lecture seule ou désactivé champ de saisie serait obtenir effacée si la validation du formulaire d'échec lors de l'envoi. J'ai trouvé une autre solution qui semble fonctionner plutôt élégamment en laissant le champ de saisie techniquement modifiable, mais qui empêche de modifier en faisant un flou dès qu'il reçoit le focus. Si vous n'avez pas le même problème avec votre serveur-côté de l'environnement que j'ai fait avec JSF (ce qui ne veut pas soumettre les valeurs même de l'entrée les champs marqués seulement en lecture seule), vous pourriez être en mesure d'utiliser la même technique dans votre situation, avec le résultat étant que vous n'avez pas besoin d'un champ caché de conserver le valeur. Comme la deuxième réponse, cependant, il ne traite pas de la question de rendre le champ look handicapés, au moins pas sans une certaine supplémentaire de code CSS.

    Le code JSF:

    <p:inputText id="entid" value="#{RequestBean.entityID}" onfocus="blur();" />

    qui devient le code HTML suivant:

    <input id="entid" type="text" value="10003" onfocus="blur();" />

    Vous pouvez en voir plus sur elle ici: Comment persister vue JSF paramètres par le biais de la validation

    InformationsquelleAutor Kevin Rahe
  3. 3

    Vous pouvez utiliser css pour le faire paraître comme vous le voulez, même si cela peut ne pas correspondre à d'autres handicapés champs de la croix-navigateur/plate-forme.

    <input type="text" value="Sample text" readonly="readonly" style="color: #787878;"/>
    • Qui peut être accompli par le style de tous les éléments de formulaire.
    • J'ai ajouté un exemple pour vous...
    • c'est vrai.
    InformationsquelleAutor neurotik
  4. 2

    Je sais que cela a été répondu mais je voulais donner mon CSS exemple.

    Parce que quand j'étais à la recherche d'une solution, comment le style d'un champ de saisie de sorte qu'il semblait qu'il était désactivé, j'ai toujours fini avec un champ de saisie à la recherche de ce genre.

    Faire un champ de saisie de texte look désactivé, mais la loi sur readonly

    Avec la frontière - gauche & top d'avoir une couleur plus foncée, etc. Ainsi, un résolus à l'aide de ce code CSS.

    input[readonly]{
  border-color: darkgrey;
  border-style: solid;
  border-width: 1px;
  background-color: rgb(235, 235, 228);
  color: rgb(84, 84, 84);
  padding: 2px 0px;
}

    Fait une jsfiddle si vous les gars peuvent regarder de plus près.

    Il semble bon sur Chrome, sur d'autres navigateurs, vous devez modifier les couleurs abit. Comme dans Firefox, vous devez aussi changer la couleur de Fond et de la couleur etc.

    background-color: rgb(240, 240, 240);
color: rgb(109, 109, 109);
    InformationsquelleAutor Devl11