dart - 如何在 dart 中自动增长文本区域元素？

Question

我想要一个 textarea 元素，可以根据 textarea 元素的内容动态调整其高度。

我如何在 Dart 中实现这个？

Answer 1

仅使用纯 dart:html:

var textArea = querySelector('textarea');
textArea.onInput.listen((_) {
  // shrink the textarea when needed
  textArea.style.height = 'auto';

  // set the height to scrollHeight plus some correction
  var correction = textArea.offsetHeight - textArea.clientHeight;
  textArea.style.height = '${textArea.scrollHeight - correction}px';
});

您还可以创建一个 angular2 指令:

@Directive(
    selector: 'textarea[autogrow]',
    host: const {
      '(input)': 'onInput(\$event.target)'
    }
)
class AutogrowDirective {

  onInput(TextAreaElement textArea) {
    // shrink the textarea when needed
    textArea.style.height = 'auto';

    // set the height to scrollHeight plus some correction
    var correction = textArea.offsetHeight - textArea.clientHeight;
    textArea.style.height = '${textArea.scrollHeight - correction}px';
  }
}