代码之家 › 专栏 › 技术社区 › JaviZu

一些带占位符的div

placeholder contenteditable css html jquery

JaviZu · 技术社区 · 11 年前

我想在可编辑的“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以查看其占位符。

知道我做错了什么吗?有什么建议用另一种方式做吗?

谢谢

1 回复 | 直到 11 年前

4dgaurav 11 年前

Demo

enter image description here

css格式

css中的数据属性是直接应用的,即不使用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;
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前