Comment créer un "espace réservé" pour DIV qui agit comme un champ de texte?
Div n'a pas d'attribut d'espace réservé
<div id="editable" contentEditable="true"></div>
Je voudrais <Please your enter your Name> pour afficher en DIV lorsque l'utilisateur recule le texte entier dans le DIV, ou aucun texte à l'intérieur, comment faire?
Voici une pure solution CSS uniquement: -
<div contentEditable=true data-ph="My Placeholder String"></div>
<style>
[contentEditable=true]:empty:not(:focus):before{
content:attr(data-ph)
}
</style>
Ici, nous sélectionnons essentiellement tous les contentEditable<divs> qui sont vides et floues. Nous créons ensuite un pseudo-élément avant la sélection CSS (le div modifiable) et fixons notre texte d'espace réservé (spécifié le data-ph attribut) comme contenu.Si vous ciblez des navigateurs CSS2 à l'ancienne, modifiez toutes les occurrences de data-ph à title
Correction ....... le :empty le sélecteur n'est pas pris en charge dans IE version 8 et antérieures.
Vous pouvez essayer celui-ci!
html:
<div contentEditable=true data-text="Enter name here"></div>
css:
[contentEditable=true]:empty:not(:focus):before{
content:attr(data-text) }