javascript - 使用knockout js自动增长textarea

Question

我已经实现了在 keyup 事件中自动扩展文本区域高度的逻辑。但是，我希望 textarea 在值通过 knockout 自定义绑定(bind)绑定(bind)到 textarea 后也初始化其高度。任何解决方案？ (仅使用 KnockoutJS，不使用 jQuery 或任何其他库。)

Answer 1

我强烈建议不要使用事件来触发调整大小。相反，您可以使用 textInput 绑定(bind)来跟踪可观察对象中的输入并订阅那里的更改。

这是一个例子:

<textarea data-bind="textInput: value, autoResize: value"></textarea>

ko.bindingHandlers.autoResize = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    ko.computed(function() {
      ko.unwrap(valueAccessor());
      resizeToFitContent(element);
    })
  }
};

之所以可行，是因为:

• textInput 绑定(bind)将任何输入更改写入可观察的 value 变量。
• computed 使用此值触发调整大小。这会自动创建订阅。

这比 keydown 方法更好，因为它处理诸如 Right Mouse Button > cut 之类的事情

同样显示 event 的例子:

var resizeToFitContent = function(el) {
  // http://stackoverflow.com/a/995374/3297291
  el.style.height = "1px";
  el.style.height = el.scrollHeight + "px";
}


ko.bindingHandlers.autoResize = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    ko.computed(function() {
      ko.unwrap(valueAccessor());
      resizeToFitContent(element);
    })
  }
};

ko.applyBindings({ 
  value: ko.observable("Test"), 
  
  onKey: function(data, event) {
  	resizeToFitContent(event.target);
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<textarea data-bind="textInput: value, autoResize: value"></textarea>
<textarea data-bind="event: { keyup: onKey }"></textarea>