Как создать "заполнитель" для DIV, который действует как текстовое поле?

Div не имеет атрибута placeholder

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

Я хочу, чтобы <Please your enter your Name> отображался в DIV, когда пользователь переместил весь текст в DIV или не получил текст внутри, как я могу это сделать?

Ответы

Ответ 1

Вот чистое решение только для 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 и ранее.

Ответ 2

Вы можете попробовать это!

HTML:

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

CSS

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

проверить (демонстрацию)

Ответ 3

в 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