HTML Textarea：如何在值更改时收到通知（未触发输入事件）

Question

我的前端应用程序需要在其内容更改时自动调整文本区域的高度。我可以通过对input 事件做出反应来部分地使其工作，如下所示：

textarea.addEventListener('input', adjustSize);

问题是在代码中设置值时不会触发这个：

textarea.value = 'some new value';

是否还有一种优雅的方式来捕捉这些变化？我看到的一个选项是手动触发事件，但这对我不起作用，因为我需要对更改做出反应并进行调整大小的上下文显然不知道更改何时发生，以及上下文我进行更改的地方不知道其他一些代码需要知道值何时更改。

var textarea = document.getElementById('myInput');

textarea.addEventListener('input', adjustSize);

// this does not trigger the event handler
setTimeout(write, 1000);

function adjustSize() {
  console.log('adjustSize');
}

function write() {
  textarea.value = 'new textarea value';
}

.myInput {

}

<textarea id="myInput" class="myInput">
  I am textarea
</textarea>

Answer 1

因为您是通过代码进行更改，所以您需要使用DOM Mutation Observer 来监控元素的更改。但是，不要设置textarea的value，而是textarea的value是它的内容，所以设置textContent。

var textarea = document.getElementById('myInput');

textarea.addEventListener('input', adjustSize);

setTimeout(write, 1000);

function adjustSize() {
  console.log('adjustSize');
}

function write() {
  // Don't set the value, change the content
  textarea.textContent = 'new textarea value';
}


// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Create an observer instance linked to the callback function
const observer = new MutationObserver(adjustSize);

// Start observing the target node for configured mutations
observer.observe(textarea, config);

// Later, you can stop observing
//observer.disconnect();

.myInput {

}

<textarea id="myInput" class="myInput">
  I am textarea
</textarea>