Cách tạo "trình giữ chỗ" cho DIV hoạt động như textfield?

Question

Div không có một thuộc tính placeholder

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

Tôi muốn <Please your enter your Name> để hiển thị trong DIV khi xóa lùi tài toàn bộ văn bản trong DIV, hoặc không có văn bản ở bên trong, Làm thế nào tôi có thể làm điều đó?

Answer 1

trong HTML

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

trong 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

Dưới đây chỉ là một CSS tinh khiết giải pháp: -

0.123.

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

Ở đây, về cơ bản chúng tôi chọn tất cả contentEditable<divs> bị trống & bị mờ. Sau đó chúng tôi tạo một phần tử giả trước khi lựa chọn CSS (div có thể chỉnh sửa) và sửa văn bản giữ chỗ của chúng tôi (đã chỉ định thuộc tính data-ph) làm nội dung của nó.

Nếu bạn đang nhắm mục tiêu các trình duyệt CSS2 trường cũ, thay đổi tất cả các lần xuất hiện của data-ph-title
Correction ....... chọn :empty không được hỗ trợ trong phiên bản IE 8 trở về trước.

Answer 3

Bạn có thể thử cái này!

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)