如何爲DIV創建像textfield一樣的「佔位符」？

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> 

在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

這裏是一個純CSS唯一的解決辦法： -

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

在這裏，我們基本選擇所有contentEditable<divs>是空&模糊。然後，我們在CSS選擇（可編輯div）之前創建一個僞元素，並修復佔位符文本（指定data-ph屬性）作爲其內容。

如果你是針對舊學校CSS2的瀏覽器，改變data-ph所有出現title
修正.......的:empty選擇不在IE版本8和更早版本支持。

Answer 3

你可以試試這個！

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)