placeholder 是HTML5中input的屬性,但該屬性並不支持除input以外的元素
但我們可以使用Css
before選擇器來實現完全相同的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Div+placeholder</title>
<style>
.rich{
color:balck;
width:100px;
height:100px;
border: 1px solid red;
margin: 20px 50%;
}
/*為空時顯示 element attribute content*/
.rich:empty:before{
content: attr(placeholder); /* element attribute*/
/*content: 'this is content';*/
color:#red;
}
/*焦點時內容為空*/
.rich:focus:before{
content:none;
}
</style>
</head>
<body>
<div class='rich' contenteditable="true" placeholder='當 element 內容為空時,我就會出現'></div>
</body>
</html>
效果：
參考：
HTML5
placeholder
線上Demo:
DIV實現css placeholder效果