Most of them rely on scrollheight (not the standard of the consortium, introduced by IE), KeyUp events to complete. One of the more interesting is the "mirror element" (mirror Element), and settimeout polling implementation. The general idea of realization is as follows:
To place a single pre element in a position:absolute way outside of client view, and to set it up like the textarea style, we call this pre element "mirror", The 200ms polling is then carried out through the settimeout to update the new value in the textarea to the mirror element, because the mirror element is set to block, so its size varies depending on how much the content is. Then, the offsetheight of the mirror element is applied to the corresponding textarea, so that the height varies with the content.
It's a really good idea. But such polling seems a bit "wasteful" because the average user does not keep typing, and every time the offsetheight is calculated, it is more resource intensive.
Now that we've found the problem, we're going to improve on the problem, and it won't be too difficult to make changes in other people's thinking.
To remove the offsetheight of the computed mirror element, we can use a wrapper parcel mirror element and textarea to set their style to the same, and the mirror element is hidden by Visibility:hidden ( Notice is not display:none), so that mirror element space is still occupied, and then textarea relative to wrapper absolute positioning, the textarea covering mirror elements, our example is textarea overlay on the pre, TextArea's height,width properties are set to 100%, so that the height of the pre can be directly reflected on the wrapper, textarea size will also change, which is automatic, we use the "block-level" elements of the characteristics
For endless polling, I still think it's better to do it with KeyUp, but the processing of events, we can give users a time interval, do not need each input to be processed, the example set in the interval of 250ms, when the user input process, if the user paused, there is a 250ms gap, The value of the textarea is assigned to the span of the pre.
The idea is finished, it should be relatively simple.
The following is HTML and corresponding JavaScript (recently liked MooTools), because the CSS length is long, concrete can look at the bottom of the page Jsfiddle share.
Copy Code code as follows:
<div class= "Expanding-wrap" >
<div class= "Expanding-area" >
<pre class= "Mirror-wrap" ><span class= "Mirror" ></span><br/></pre>
<textarea class= "source" cols= "a" rows= "ten" ></textarea>
</div>
</div>
Copy Code code 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, there is a reference, feel good, interested to see the "reference", this example may not support IE6, give up IE6 for a while, we do front-end, have to look before: D
