可输入文字的div标签
HTML标签中有几个标签是可以输入文字的？
很多人都会回答两个： input，textarea。
然而，并不只有两个，div，p还有其他很多标签其实都可以。
代码：
<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属性，这个标签就会变为可编辑状态。
扩展
切换
元素的编辑状态：
var x = document.getElementById("myP");
if (x.contentEditable == "true") {
x.contentEditable = "false";
button.innerHTML = "p 元素内容可编辑!";
} else {
x.contentEditable = "true";
button.innerHTML = "p 元素内容不可编辑!";
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读