如何为 DIV 创建一个类似于文本字段的“占位符”？答案

【问题标题】：How to create a "placeholder" for DIV that act like textfield?如何为 DIV 创建一个类似于文本字段的“占位符”？
【发布时间】：2013-06-01 05:42:24
【问题描述】：

Div 没有占位符属性

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

我希望 <Please your enter your Name> 在用户退格 DIV 中的整个文本时显示在 DIV 中，或者里面没有文本，我该怎么做？

【问题讨论】：

您能详细解释一下用户如何“退格 div”吗？
抱歉我的错，忘记编码了
javascript 在这种情况下会成为你的朋友！
可以给我看一些例子吗？？

标签： html placeholder

【解决方案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 及更早版本中不受支持。

【讨论】：

比人，我从没想过你可以用纯 css 做这样的事情。太棒了！
非建设性评论：这很漂亮！干得好！
即使元素被聚焦，如何保留占位符？如果没有 not(:focus) 选择器，插入符号会消失或出现在错误的位置。
@boh，即使在元素获得焦点时也要保留占位符，请执行以下操作： [contentEditable=true]:empty:before { content: attr(data-ph) }
如果div标签的开头和结尾之间有任何字符或空格，这将不起作用。

【解决方案2】：

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

【讨论】：

【解决方案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)

【讨论】：

这与第一个答案有何不同？

【解决方案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

【讨论】：