因為一些原因，無意中看到了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'表示該元素內容不可編輯；