H5 contenteditable attribute learning

The article refers to
http://www.zhangxinxu.com/wordpress/2016/01/contenteditable-plaintext-only/
http://www.w3school.com.cn/html5/att_global_contenteditable.asp

as a multi-line text field function, textarea fulfills most of our needs. However, one disadvantage of textarea is that it cannot adapt to the height of the content like a normal div tag .

Using the contenteditable simulation text field supported by all browsers can achieve a very good experience of the effect of automatically expanding the height following the content.

We can set a maximum height (max-height), and then set overflow: scroll; to limit the height .

 

<div style="" class="border_000000 max_height_100px overflow_scroll" contenteditable="true" onchange="getUserInput()" onblur="blurAction()" id="contenteditableWidget" >
    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" alt="Go to Baidu Home" title="Go to Baidu Home">
    <div class="color_3eb034">dsafdsaf</div>
</div>

<button onclick="getUserInput()">
    Get manually added content in DIV
</button>

<script type="text/javascript">
    // Get the content in contenteditable, which is an HTML code
    function getUserInput(){
        var contenteditableWidgetObj = document.getElementById("contenteditableWidget");
        console.log(contenteditableWidgetObj.innerHTML);
//        console.log("innerText" + contenteditableWidgetObj.innerText);
//        console.log("textContent" + contenteditableWidgetObj.textContent);
    }

    // contenteditable supports onblur event
    function blurAction(){
        console.log("blurAction");
    }
    $(function(){

    });
</script>

Remark:

1. After setting the contenteditable property, the onchange event is not supported

2. I tested based on the chrome browser, and did not test other browsers (the company's products are based on the chrome kernel, and so are the mobile terminals)