Come creare un "segnaposto" per DIV che si comporta come un campo di testo?

Question

Div non hanno un attributo segnaposto

<div id="editable" contentEditable="true"></div> 

Voglio <Please your enter your Name> mostrare in DIV quando l'utente backspace l'intero testo nel DIV, o nessun testo dentro, come posso farlo?

Answer 1

in HTML

<div id="editable" contenteditable="true"> 
    <p>Please your enter your Name</p> 
</div> 

in JavaScript

jQuery.fn.selectText = function(){ 
    var doc = document; 
    var element = this[0]; 
    console.log(this, element); 
    if (doc.body.createTextRange) { 
     var range = document.body.createTextRange(); 
     range.moveToElementText(element); 
     range.select(); 
    } else if (window.getSelection) { 
     var selection = window.getSelection();   
     var range = document.createRange(); 
     range.selectNodeContents(element); 
     selection.removeAllRanges(); 
     selection.addRange(range); 
    } 
}; 

$("#editable").click(function() { 
    $("#editable").selectText(); 
}); 

jsFiddle

Answer 2

Qui è un puro CSS unica soluzione: -

0.123.

<div contentEditable=true data-ph="My Placeholder String"></div> 
<style> 
    [contentEditable=true]:empty:not(:focus):before{ 
     content:attr(data-ph) 
    } 
</style> 

Qui, abbiamo praticamente selezionare tutti contentEditable<divs> che sono vuoti & offuscata. Creiamo quindi uno pseudo elemento prima della selezione CSS (il divisibile modificabile) e sistemiamo il nostro testo segnaposto (specificato l'attributo data-ph) come suo contenuto.

Se si prendono di mira i browser vecchi scuola CSS2, cambiare tutte le occorrenze di data-ph-title
Correzione ....... il selettore :empty non è supportato in IE versione 8 e precedenti.

Answer 3

Puoi provare questo!

html:

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

css:

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

check it out (demo)