因为一些原因,无意中看到了H5的全局属性contenteditable,原本不知道这个属性该用在哪里,后来发现可以用带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调整高度哦)。但是div它是不支持placeholder属性的。那怎么在div内容为空的时候显示一个默认文字呢?
先看下效果:
看下代码(code)呗:
<div class='input' contenteditable placeholder='请输入文字'></div>
/**css样式*/
.input{
width:200px;
height:24px;
line-height:24px;
font-size:14px;
padding:5px 8px;
border:1px solid #ddd;
}
.input:empty::before {
content: attr(placeholder);
}
/**css样式*/
.input{
width:200px;
height:24px;
line-height:24px;
font-size:14px;
padding:5px 8px;
border:1px solid #ddd;
}
.input:empty::before {
content: attr(placeholder);
}
contenteditable属性是干嘛的呢?
contenteditable属性定义了是否可编辑元素的内容;很官方的解释,有木有.....
contenteditable='true'表示该元素内容可编辑;'false'表示该元素内容不可编辑;