Question

Div没有占位符属性

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

当用户退回DIV中的整个文本或者内部没有文本时，我想要在DIV中显示<Please your enter your Name>，我该怎么办？

Answer 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>为空的＆amp;模糊。然后我们在CSS选择（可编辑div）之前创建一个伪元素，并修复我们的占位符文本（指定data-ph属性）作为其内容。

~~如果您的目标是旧式CSS2浏览器，请将所有data-ph更改为title~~
更正....... IE 8及更早版本中不支持:empty选择器。

Answer 2

你可以尝试这个！

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)

Answer 3

我在其他答案中发现的是，在使用:not(:focus)伪类时，我必须再次单击以获取闪烁的光标并能够键入。如果我单击占位符以外的区域，则不会发生此问题。

我的解决方法只是删除:not(:focus)。即使以这种方式，当我单击可编辑的div之后，占位符仍会存在，无论我在div的哪个位置单击，我都可以键入，并且占位符会在我键入内容后立即消失。

顺便说一句，我检查了YouTube的评论div实现，看来他们在做同样的事情，例如#contenteditable-root.yt-formatted-string[aria-label].yt-formatted-string:empty:before

.editableDiv1,
.editableDiv2 {
  border-bottom: 1px solid gray;
  outline: none;
  margin-top: 20px;
}

.editableDiv1[contentEditable="true"]:empty:not(:focus):before {
  content: attr(placeholder)
}

.editableDiv2[contentEditable="true"]:empty:before {
  content: attr(placeholder)
}

<div class="editableDiv1" contentEditable=true placeholder="If you click on this placeholder, you have to click again in order to get the blinking cursor and type..."></div>

<div class="editableDiv2" contentEditable=true placeholder="Click on placeholder is fine, it'll disappear after you type something..."></div>

Answer 4

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

如何为像文本字段一样的DIV创建“占位符”？

4 个答案: