Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Can you provide sample code of a live page? As it stands, the javascript you've shown here only works on the single element identified with the ID of text; therefore, no matter how many textareas you have, the only element affected will one of the elements on the page with that ID -- of which you should have only one, of course.</p> <p>Approaching the code as it stands now, you need to change from <code>document.getElementById</code> to something like <code>document.getElementsByTagName('textarea')</code> then loop over the result. Try the following:</p> <pre><code>function init () { var textareas = document.getElementsByTagName('textarea'); ... var textareasLength = textareas.length; for (var i = 0; i &lt; textareasLength; i++) { observe(textareas[i], 'change', resize); observe(textareas[i], 'cut', delayedResize); observe(textareas[i], 'paste', delayedResize); observe(textareas[i], 'drop', delayedResize); observe(textareas[i], 'keydown', delayedResize); } } </code></pre> <p><strong>EDIT:</strong></p> <p>On review, among other things, your resize() function was only working on <code>text</code> variable as defined in the line immediately prior. Without totally refactoring your code, one way to get the functionality you want is the following:</p> <pre><code>function init () { var textareas = document.getElementsByTagName('textarea'); function resize() { if( arguments.length&gt;0 ) { self=arguments[0]; } else self=this; self.style.height = 'auto'; self.style.height = self.scrollHeight+'px'; } /* 0-timeout to get the already changed text */ function delayedResize() { var self=this; window.setTimeout(resize(self), 0); } var textareasLength = textareas.length; for (var i = 0; i &lt; textareasLength; i++) { observe(textareas[i], 'change', resize); observe(textareas[i], 'cut', delayedResize); observe(textareas[i], 'paste', delayedResize); observe(textareas[i], 'drop', delayedResize); observe(textareas[i], 'keydown', delayedResize); } } </code></pre> <p>This isn't optimal, but it should work.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload