1. 程式人生 > >div模擬input實現輸入框

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'表示該元素內容不可編輯;