DIV için metin alanı gibi davranan bir "yer tutucu" nasıl oluşturulur?

Question

Div ben bunu nasıl Kullanıcı backspace DIV bütün metni veya iç metin, yapabilecekken DIV göstermek <Please your enter your Name> istediğiniz bir yer tutucu özelliği

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

yok mu? HTML

Answer 1

JavaScript

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

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(); 
}); 

İşte jsFiddle

Answer 2

saf CSS tek çözüm: -

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

Burada temelde bulanık & boş olan tüm contentEditable<divs> seçin. Daha sonra, CSS seçiminden (düzenlenebilir div) önce sahte bir eleman yaratırız ve içerik olarak yer tutucu metnimizi (data-ph özniteliğini) belirleriz. Eğer eski okul BB2 tarayıcıları hedefliyorsanız

, title
Düzeltme için data-ph geçtiği her yerde değiştirmek ....... :empty seçici IE sürüm 8 desteklenir ve önceki edilmez.

Answer 3

Bunu deneyebilirsiniz!

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)