自动调整页面上的多个文本区域的大小

Question

这些是自动调整单个文本区域大小的片段：

http://jsfiddle.net/ImpressiveWebs/fGNNT/1333/

http://jsfiddle.net/CbqFv/

例如，在上面的第一个链接中，这是textarea：

<textarea id="comments" placeholder="Type many lines of texts in here and you will see magic stuff" class="common"></textarea>

并在输入文本时调整大小。

然而，

<textarea id="comments" placeholder="Type many lines of texts in here and you will see magic stuff" class="common"></textarea>

<textarea id="comments" placeholder="Type many lines of texts in here and you will see magic stuff" class="common"></textarea>

只有第一个正在调整大小。如何让第二个也调整大小？

Answer 1

id必须是唯一的，在这里您声明了两个具有相同ID comments的div;因为你已经将你的事件附加到一个id，它就无法工作，因为函数getElementById只返回一个元素（第一个在dom中找到，这就是你的第二个textarea没有调整大小的原因。

您可以使用class代替div，或将您的活动附加到textarea元素，而不是特定的div

Answer 2

这很好http://jsfiddle.net/fGNNT/2219/。使用该类进行识别而不是ID

// Bad
var txt = $('#comments'),
    hiddenDiv = $(document.createElement('div')),
    content = null;

// Good and working
var txt = $('.common'),
    hiddenDiv = $(document.createElement('div')),
    content = null;