Javascript text box textarea height shrinks adaptively with content_form special effects

Directly upload the code:
Option 1:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Feng Yunzhi » Text box textarea height adaptive growth/retracting</title> <style> textarea { height:100px; width: 300px; } </style> <!--以下代码中onpropertychange：IE支持；oninput：FireFox支持；为了兼容IE和FF，所以加上了这个两个；--> <textarea id="txtContent" rows="1" onpropertychange="ResizeTextarea()" oninput="ResizeTextarea()" onkeyup="ResizeTextarea()">Produced by Qingfeng http://jb51.net
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

Option 1 is available in each browser , there is no problem with the text box adaptively growing with the content; however, there is a difference in shrinking performance when deleting content. IE and Opera behave normally, but Firefox, Chrome, and Safari do not shrink. The reason is that when the text box content height is less than the text box height, the scrollHeight value is equal to the text box height, not the text box content height.
Option 2:

Copy code

The code is as follows:

;textarea id="txtContent" rows="5" cols="50" onkeyup="ResizeTextarea()" style="overflow-y:hidden;">Textarea height adaptively grows with the content, no scroll bar
Produced by Qingfeng
http://jb51.net





Option 2 in each browser The performance is the same, and the text box can be adaptively grown and shrunk with the content. But one drawback is that when the height of the text box increases, the text box display will jump.
In addition, the above two solutions are invalid for operating text content by selecting cut, paste, delete and other commands from the text box right-click menu. It can be said that a perfect solution has not yet been found, leaving it to be studied in the future. If any students have a perfect plan, please let me know!

Other options:

A different approach to elastic textareas

Solution 2 is implemented by referring to this article
1. Build an Elastic Textarea with Ext JS
2. Smart TextArea: scrollHeight in IE, Firefox, Opera and Safari
3. Original link: http://witmax.cn/javascript-textarea-auto-grow.html