Non-mainstream textarea self-growth js Code

Most of them are completed by scrollHeight (not W3C standard, introduced by IE) and keyup events. It is interesting to use "mirror element" and setTimeout round robin. The general implementation idea is as follows:

The position: absolute method is used to locate a separate pre element outside the client view, and the style setting is the same as that of textarea. We call this pre element "mirror", then, we use setTimeout to perform a Ms Round Robin to update the new value in textarea to the mirror element. Because the mirror element is set to block, its size will change with the amount of content, then, apply the corresponding textarea by obtaining the offsetHeight of the mirror element, so that the height changes with the content.

This is indeed a good idea. However, this round robin seems to be a waste, because the average user does not keep inputting, And it is resource-consuming to calculate the offsetHeight each time.

Since the problem is found, it is not too difficult for us to improve the problem and make changes on others' ideas.

First, remove the calculation of the mirror element offsetHeight. We can use a wrapper to wrap the mirror element and textarea and set their styles to the same. The mirror element uses visibility: hidden To hide (note that it is not display: none), so that the space of the mirror element is still occupied, and then the textarea is absolutely positioned relative to the wrapper, And the textarea is overwritten over the mirror element, in our example, textarea overwrites the pre, and the height and width attributes of textarea are set to 100%, so that the pre height changes can be directly reflected on wrapper, the size of textarea also changes, which is automatic. We use the features of block-level elements.

For endless round robin, I still think it is better to use keyup, but in terms of event processing, we can give users a time interval and do not need to process each input, the time interval set in this example is 250 ms. When the user enters the process, if the user pauses and there is a ms gap, the textarea value is assigned to the pre span.

It should be relatively simple after the thought is finished.

Below are html and corresponding javascript (recently I like mootools). Because css is long enough, you can see the jsfiddle share at the bottom of the page.
Copy codeThe Code is as follows:
<Div class = "expanding-wrap">
<Div class = "expanding-area">
<Pre class = "mirror-wrap"> <span class = "mirror"> </span> <br/> </pre>
<Textarea class = "source" cols = "30" rows = "10"> </textarea>
</Div>
</Div>

Copy codeThe Code is as follows:
(Function ($, $ ){
Var mirrorEl =$ $ ('. expanding-area. mirror '),
TextEl = $ ('. expanding-area. source '),
Timehandle = null,
Handler = function (){
MirrorEl. set ('text', textEl. get ('value '));
};
Handler ();
TextEl. addEvent ('keyup', function (event ){
ClearTimeout (timehandle );
Timehandle = handler. delay (200 );
});
}) ($, $ );

Finally, I think it is good to have a reference document. If you are interested, please refer to the reference document. This example may not support IE6. If you have abandoned IE6 for a while, we will be working on the frontend, see it earlier: D