可输入文字的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属性，这个标签就会变为可编辑状态。

扩展

切换

元素的编辑状态：

扫描二维码关注公众号，回复： 9603716 查看本文章

var x = document.getElementById("myP");
if (x.contentEditable == "true") {
    x.contentEditable = "false";
    button.innerHTML = "p 元素内容可编辑!";
} else {
    x.contentEditable = "true";
    button.innerHTML = "p 元素内容不可编辑!";
}