Let div contenteditable attribute can also be used as input box

You know div can also be used as input box it?

Contenteditable global properties of the H5, instead of input or textarea div with contenteditable attribute as an input box (div height can be automatically adjusted according to the content), but it is not supported div placeholder properties. Then how in the div is empty when it displays a default text?

The syntax input box

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

So write is not perfect, because at the time of focus, content placeholder does not disappear

You can write a method to simulate placeholder

Because only input, textarea to use ele.val (), it is used here ele.text () value; this method can of course compatible with analog processing in the INPUT
placeholder used.

<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"),'请输入文字');

---

Original Author: Katherine_Lisa