contenteditable屬性讓div也可以當做輸入框

你知道div也可以當做輸入框么？

H5的全局屬性contenteditable，帶有contenteditable屬性的div而不是input或者textarea來作為輸入框（div可以根據內容自動調整高度），但是div它是不支持placeholder屬性的。那怎么在div內容為空的時候顯示一個默認文字呢？

輸入框語法

<element contenteditable="true|false">

    <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);
    }

這么寫不是很完善，因為在聚焦的時候，placeholder中的內容不消失

可以寫一個方法，模擬placeholder

因為只有input、textarea才能使用 ele.val()，所以這里使用 ele.text() 取值；當然這種方法可以在input處理兼容模擬
placeholder中使用。

<div class='input' contenteditable></div>
function checkValue(obj,tipText){
        $(obj).focus(function(){
            if( obj.text()== tipText ){
                obj.text("");
            }
        });
        $(obj).blur(function(){
            if( obj.text()=="" ){
                obj.text(tipText);
            }
        });
        if( $.trim( obj.text() )=="" ){
            obj.text(tipText);
        }
    }
    checkValue($(".input"),'請輸入文字');

---

原文作者：Katherine_Lisa