Highly customized content changes with the input of the input box

Demand : Custom height variation with the input content input box; 36px height when not a single-line, the content of less than 4 rows transformed input block is increased or decreased with the height of the input content is larger than the constant height of 4 lines, the content scroll;

Difficulty : while reducing the height and text content when no content row height is reduced;

Interactive :

 

Solution : hostInput as input frame height with the input content changes, a new shadowbox, the height is 0, a width equal to the width hostInput, and beyond hide, put a block shadowInput in shadowbox, the text text input box block and styles are consistent, then taken as the height of the height shadowInput hostInput calculated.

 

HTML:

 

CSS:

 

JS:

 

Guess you like

Origin www.cnblogs.com/vicky24k/p/11464909.html