div模拟input实现输入框

因为一些原因，无意中看到了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'表示该元素内容不可编辑；