jquery - 一些带有占位符的 div

Question

我想在我的可编辑“div”中创建一个占位符。我有一些像这样的 div:

<div id="introDatos" class="test marco-cabecera" contenteditable="true" placeholder="Escribe aquí los datos...">

<div id="introNumeros" class="test marco-cabecera" contenteditable="true" placeholder="Escribe aquí los números...">

我的 CSS 是:

 .test {
    border: 1px #e4e4e4 solid;
    padding: 25px 20px;
}

.test[placeholder]:empty:before {
    content: attr(placeholder);
    color: #555; 
    opacity: 0.3;
}

效果几乎不错。关键是默认情况下它只显示第一个 div 的占位符。我需要单击下一个 div 以查看其占位符。

知道我做错了什么吗？有没有建议以其他方式做到这一点？

谢谢!

Answer 1

Demo

CSS

直接应用css中的data-attributes，即不使用div的类或id。

[contentEditable="true"] {
    border: 1px #e4e4e4 solid;
    padding: 25px 20px;
}
[contentEditable="true"]:empty:not(:focus):before {
    content:attr(data-placeholder);
    color: #555;
    opacity: 0.3;
}