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

Question

Div没有占位符属性

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

我想<Please your enter your Name>在DIV中显示当用户退格DIV中的整个文本,或者里面没有文字时,我该怎么办呢？

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

如果你的目标的老同学CSS2的浏览器,更改所有出现的data-ph以title
修正.......的:empty选择是不是在IE版本8和更早版本支持.

Answer 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>

Answer 3

你可以尝试这个!

HTML:

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

CSS:

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

检查出来(演示)