input div

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'表示该元素内容不可编辑；

————————————————

版权声明：本文为CSDN博主「珍妮的小罐君」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq_36671474/article/details/68064132