在div标签中添加占位符是否可行？

Question

当我的div元素为空时，我希望向用户显示一些文本。

我尝试给我的div添加placeholder属性，但是文本没有被显示。

<div placeholder="Enter the text"> </div>

当我的div元素为空时，我该如何显示一条消息？

- user123

---

为什么您想要显示占位符？您所说的占位符具体指的是什么？ - SquareCat

事实上，如果您想在 div 中显示内容，则必须将内容放置在标签之间：<div>你好</div>。 - SquareCat

为什么要在 div 中使用占位符？你可以使用 input 类型或 textarea，然后再使用占位符。 - user3045479

问题已存在：http://stackoverflow.com/questions/17753819/if-editable-div-have-no-text-than-set-placeholder/17754905 - G-Cyrillus

Answer 1

有很多使用JavaScript的选项，但如果你想在CSS中完成，请尝试这个：

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

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

示例

- Joke_Sense10

---

真漂亮！我从未看过如此整洁的解决方法。我能问一下兼容性吗？因为我也想使用这个 :) - SquareCat

@In Lak'esh 它在所有浏览器中都可以工作，除了使用 CSS2 浏览器的情况下，您需要使用 title 而不是 data-text。 - Joke_Sense10

请注意，如果开头和结尾的div标签之间有任何字符或空白，这个方法将不起作用。 - Kevin

Joke_Sense，我在我的contenteditable div中有“<div><br></div>”，我该如何使它显示占位符？ - horse

非常棒，谢谢。我想补充一下，通过从 CSS 选择器中移除 :not(:focus)，实际上它的行为就像一个真正的占位符。 - user4676340

Answer 2

我已经在这里回答过这样一个问题，并使用了这个测试：http://codepen.io/gcyrillus/pen/hzLIE

div:empty:before {
  content:attr(data-placeholder);
  color:gray
}

请查看如果可编辑的div没有文本，则设置占位符

- G-Cyrillus

---

这是正确的答案！它表现得像普通的占位符，甚至在2021年也能正常工作，谢谢！ - B8ightY

Answer 3

使用纯CSS，也可以实现不需要使用contentEditable属性的效果。

使用:empty伪类和::before伪元素，您可以向空元素添加占位符。

以下示例为未定义data-placeholder属性的

元素提供了回退占位符。

示例：

div:empty::before {
  color: grey;
}
div[data-placeholder]:not([data-placeholder=""]):empty::before {
  content: attr(data-placeholder);
}
div:empty::before {
  content: 'fallback placeholder';
}

<div data-placeholder='data- placeholder'></div>
<br>
<div></div>

- matt.

---

目前为止最佳答案 - Utkarsh Tyagi

Answer 4

假设你想让用户输入一些文本，并在输入框中显示一些占位符，那么你可以使用以下代码：

<input type="text" value="Enter the text" onfocus="if(this.value=='Enter the text'){this.value='';}" onblur="if(this.value==''){this.value='Enter the text';}" />

当然可以将输入包装在一个div中。

<div><input [...] /></div>

您可以在这里看到它的实际效果。

- SquareCat

Answer 5

这将确保在空的 div 中有一个光标

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

[contentEditable="true"]:empty:focus:before {
    content: " ";
}

- chad steele