Frage Ist es möglich, Platzhalter in div-Tag hinzuzufügen


Ich möchte dem Benutzer einen Text anzeigen, wenn mein div Element ist leer.

Ich habe versucht, eine hinzuzufügen Platzhalter Attribut zu meinem div aber der Text wird nicht angezeigt.

<div placeholder="Enter the text"> </div>

Wie kann ich eine Nachricht anzeigen, wenn meine div Element ist leer?


34
2017-11-30 12:18


Ursprung


Antworten:


Es gibt viele Optionen mit Javascript, aber wenn Sie es in CSS tun möchten.

html:

<div contentEditable=true data-text="Enter text here"></div>

CSS:

[contentEditable=true]:empty:not(:focus):before{
    content:attr(data-text)
}

Demo


104
2017-11-30 12:26



Ich habe auf eine solche Frage hier schon mit diesem Test geantwortet: http://codepen.io/gcyrillus/pen/hzLIE

div:empty:before {
  content:attr(data-placeholder);
  color:gray
}

sehen Wenn editierbares div keinen Text als Platzhalter hat


13
2017-11-30 12:49



Dies kann auch ohne den Einsatz der erreicht werden contentEditable Attribut, mit einfachen CSS.

Verwendung der :leer Pseudo-Klasse zusammen mit der ::Vor Pseudo-Element Sie können einen Platzhalter zu einem leeren Element hinzufügen.

Das folgende Beispiel enthält einen Fallback-Platzhalter für div Elemente ohne a data-placeholder Attribut definiert.

Beispiel:

div:empty::before {
  color: grey;
}
div[data-placeholder]:not([data-placeholder=""]):empty::before {
  content: attr(data-placeholder);
}
div:empty::before {
  content: 'fallback placeholder';
}
<div data-placeholder='data- placeholder'></div>
<br>
<div></div>


4
2018-03-19 21:29



Angenommen, Sie möchten, dass der Benutzer etwas Text eingibt und ihm einen Platzhalter in das Eingabefeld zeigt. Das können Sie verwenden:

<input type="text" value="Enter the text" onfocus="if(this.value=='Enter the text'){this.value='';}" onblur="if(this.value==''){this.value='Enter the text';}" />

Natürlich können Sie die Eingabe in ein div einpacken.

<div><input [...] /></div>

Sie können dies in Aktion sehen Hier


1
2017-11-30 12:22