Using Div instead of textarea in HTML to realize input box height change with input content

Requirements in the project: The message column input height changes, more than 1 lines, automatic stretching, more than 4 lines, no longer stretch. The main idea is to use the minimum height and maximum height, plus overflow to achieve, to the maximum height, the text will not overflow but hidden. Depending on the size of the font in the text box, the height needs to be adjusted appropriately.

Code:

<id= "Leave-message-textarea"  contenteditable= "true"  Data-text= "input message"></div>

  #leave-message-textarea  { width : Span style= "color: #0000ff;" > 100% ;  Min-height : 20px ;  Max-height : 70px ;  outline :  0 ;  border :  1px solid #000 ;  Font-size :  13px ;  Overflow-x :  hidden ;  overflow-y :  auto ; -webkit-user-modify : ;} 

Where Div's placeholder effect is implemented with the Data-text property, the CSS code is as follows:

[Contenteditable=true]:empty:not (: Focus): Before {    content:attr (Data-text);}

Using Div instead of textarea in HTML to realize input box height change with input content