Jak utworzyć "element zastępczy" dla DIV, który działa jak pole tekstowe?

Question

Div nie posiada atrybut zastępczy

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

Chcę <Please your enter your Name> pokazać w DIV, gdy backspace użytkownika cały tekst w DIV, ani żaden tekst na wewnętrznej, jak mogę to zrobić?

Answer 1

w HTML

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

w 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

Tutaj jest czystym CSS tylko rozwiązanie: -

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

Tutaj w zasadzie wybrać wszystkie contentEditable<divs> że są puste & niewyraźne. Następnie tworzymy pseudo element przed zaznaczeniem CSS (edytowalny element div) i naprawiamy tekst zastępczy (określony atrybut data-ph) jako jego treść.

Jeśli kierowanie starymi przeglądarkami szkoła CSS2, zmienić wszystkie wystąpienia data-ph do title
Correction ....... selektor :empty nie jest obsługiwana w IE w wersji 8 i wcześniejszych.

Answer 3

Możesz wypróbować ten!

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)