Question

Heey，我正在笔记网站上工作。但现在我想能够调整多个textareas的大小，但我的代码只适用于第一个选择的textarea。

var content = $("#banner-message");

    for (i = 0; i < 5; i++) {
        content.append(` <textarea id="note" class="autoExpand" type="text" 
name="id">Text</textarea>
     `)
        }
$(document)
    .one('focus.autoExpand', 'textarea.autoExpand', function () {
        var savedValue = this.value;
        this.value = '';
        this.baseScrollHeight = this.scrollHeight;
        this.value = savedValue;
    })
    .on('input.autoExpand', 'textarea.autoExpand', function () {
        var minRows = this.getAttribute('data-min-rows') | 0, rows;
        this.rows = minRows;
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
        this.rows = minRows + rows;
    });

Answer 1

根据我们的评论，解决方案只是将.one改为.on：

var content = $("#banner-message");

for (i = 0; i < 5; i++) {
    content.append(` <textarea id="note" class="autoExpand" type="text" name="id">Text</textarea>
 `)
    }
$(document)
.on('focus.autoExpand', 'textarea.autoExpand', function () {
    var savedValue = this.value;
    this.value = '';
    this.baseScrollHeight = this.scrollHeight;
    this.value = savedValue;
})
.on('input.autoExpand', 'textarea.autoExpand', function () {
    var minRows = this.getAttribute('data-min-rows') | 0, rows;
    this.rows = minRows;
    rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
    this.rows = minRows + rows;
});

作为解释，.one的使用每个元素/事件类型最多只能触发一次。在您的实例中，这意味着您的代码仅在第一个textarea上执行。使用.on可以让你的代码为每个textarea运行。

Answer 2

问题是因为.one(…)绑定到document，而不是绑定到每个textarea，因此每个它正在侦听的事件最多会触发一次。（事件监听器在document上注册，它会过滤由选择器参数冒出的所有事件。{/ p>

为了让document每个文本区域触发一次，您可能希望将侦听器绑定到textarea：

.one(…)

如果您需要侦听器在文档上但每个元素只触发一次，您可能需要使用$('textarea.autoExpand') .one('focus.autoExpand', function () { … })并执行以下操作：

.on(…)

自动调整大小仅适用于第一个选定的textarea

2 个答案: