Отследить изменение высоты textarea

Question

Как отслеживать факт изменения textarea по высоте? В примере кнопки 1 и 2 вносят текст, а кнопка 3 - удаляет. Делаю кроссбраузерно на pure js. Текст будет вносится / удаляться с виртуальной клавиатуры.

let d = document.getElementById('tarea');

function f1() {
  d.innerHTML += 'qwerty';
  d.focus();
}

function f2() {
  d.innerHTML += 'ASDFGHJKLZXCVBNMQWERTYUIOP';
  d.focus();
}

function f3() {
  d.innerHTML = '';
  d.style.height = 24 + 'px';
}

#tarea {
  width: 28%;
  height: 24px;
  background: yellowgreen;
  padding: 0% 0% 0% 1%;
  resize: none;
  overflow: hidden;
  border: none;
  outline: none;
  font-size: 14px;
}

<div>
  <button onclick="f1()">1.ins</button>
  <button onclick="f2()">2.ins</button>
  <button onclick="f3()">3.del</button>
</div>
<br>
<textarea id="tarea" rows="1" autofocus onfocusin="this.style.height = 'auto';this.style.height = this.scrollHeight +10+ 'px';" placeholder="Внести текст"></textarea>

БЛОГ НА HUSL

Отследить изменение высоты textarea

Ответы (0 шт):