HTML - Conserver un espace réservé lorsque les types d'utilisateur
J'ai une entrée comme ceci:
<input value="My text" placeholder="Placeholder">
Quand je tape quelque chose dans l'entrée, le texte de l'espace réservé à disparaître, c'est tout à fait évident.
Maintenant, ce que je veux faire, c'est que je veux que le texte de l'espace réservé à rester lorsque l'utilisateur types de sorte que vous pouvez voir l'espace réservé de texte comme un texte d'arrière-plan derrière le texte original:
EDIT: je veux aussi être capable de changer l'arrière-plan de texte à l'aide de JavaScript.
source d'informationauteur super
Vous devez vous connecter pour publier un commentaire.
Difficile de penser à un bon cas d'utilisation pour un tel comportement, comme c'est le blocage de certains des utilisateurs d'entrée.
Un moyen facile serait d'utiliser
input::after
mais ce n'est pas pris en charge par n'importe quel navigateur en ce moment (merci @JukkaK.Korpela).Mais vous pouvez utiliser un wrapper élément et un attribut de données, comme suit:
Avec ce css:
:
Cliquez ici pour jsFiddle démo.
Puisque vous aurez à faire beaucoup de réglages à faire cela à l'air bon, vous pouvez également envisager l'utilisation de l'emballage
<div>
de l'élément d'entrée "look alike":CSS:
Cliquez ici pour la Démo 3. (avec moqué de
<input />
)Cliquez ici pour la Démo 2. (avec contenteditable)
Cela pourrait être fait en utilisant le 'onchange' handler. Vous devez écrire une fantaisie fonction concat le reste de l'espace réservé sur ce que l'utilisateur a tapé, et serait également placer le curseur à la fin de l'utilisateur du texte.
Voici quelques mises à l'épreuve incomplète js/psuedocode pour vous donner une idée:
Quelque chose que je n'ai pas traité ici, c'est le curseur de mise au point. Qui aura besoin d'un "onfocus" événement, et d'utiliser la userTextLength propriété ainsi de décider où placer. Pour obtenir de l'aide sur le fait que, cette réponse dirait qu'il devrait être utile.
il est impossible, si elle l'est, il sera très attrayant. Mais j'ai une idée qui peut vous aider avec prise en charge jquery.
Vous pouvez voir la démo ici: http://hangaumy.com/order/
Lorsque vous tapez, il va automatiquement ajouter des mots (ressemble à de l'espace réservé)