डीआईवी के लिए "प्लेसहोल्डर" कैसे बनाएं जो टेक्स्टफील्ड की तरह कार्य करता है?

Question

डिव एक प्लेसहोल्डर विशेषता

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

की जरूरत नहीं है मैं <Please your enter your Name> चाहते DIV में दिखाने के लिए जब उपयोगकर्ता बैकस्पेस DIV में पूरे पाठ, या अंदर पर कोई पाठ, मैं इसे कैसे कर सकता है?

Answer 1

HTML में

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

jsFiddle

Answer 2

यहाँ एक शुद्ध सीएसएस एकमात्र समाधान है: -

0,123,

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

यहाँ, हम मूल रूप से सभी contentEditable<divs> कि खाली & धुंधला कर रहे हैं का चयन करें। इसके बाद हम सीएसएस चयन (संपादन योग्य div) से पहले एक छद्म तत्व बनाते हैं और हमारे प्लेसहोल्डर टेक्स्ट को ठीक करते हैं (data-ph विशेषता निर्दिष्ट करते हैं) इसकी सामग्री के रूप में।

आप पुराने स्कूल सीएसएस 2 ब्राउज़रों को लक्षित कर रहे हैं, तो title
सुधार करने के लिए data-ph की सभी घटनाओं को बदलने ....... :empty चयनकर्ता आईई संस्करण 8 में पहले समर्थन करने और नहीं है।

Answer 3

आप इसे आजमा सकते हैं!

एचटीएमएल:

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

सीएसएस:

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

check it out (demo)