29

div 没有占位符属性

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

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

4

4 回答 4

65

这是一个纯 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
Correction....... :emptyIE 版本 8 和更早版本不支持选择器。

于 2013-08-21T22:20:49.477 回答
9

我在其他答案中发现的是，当使用: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>

于 2020-07-11T19:10:10.023 回答
8

你可以试试这个！

html:

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

CSS：

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

看看（演示）

于 2015-09-18T17:10:03.517 回答
-2

在 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

于 2013-08-07T13:21:31.393 回答