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 , который может отслеживать элемент на предмет изменений. Но не устанавливайте value текстовой области, вместо этого 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>

Answer 2

Но ... не могу понять, почему вы просто не вызываете свою функцию напрямую с кодом, который изменяет значение?

Как это ..

Сначала то же самоеу вас есть:

textarea.addEventListener('input', adjustSize);

Но тогда, когда вы измените значение просто:

textarea.value = 'some new value';
adjustSize();

Или лучше, вы можете сделать функцию, которая делает все в одно и то же время (и вы будетеполучите только одну строку за вызов):

function changeTextarea(newtext : string){
     textarea.value=newtext;
     adjustSize();
}

Таким образом, вы будете иметь тот же эффект, не записывая 2X строк каждый раз, когда вы изменяете значение текстовой области.

(Другая возможность - использовать jqueryвот так:)

$("#textAreaId").on('change', function(){
     // Do whatever here
}

Надеюсь, это поможет!