使用knockout js自动增长textarea

Question

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

Answer 1

您可以创建将 autoresize() 应用于所有文本区域的自定义绑定：

ko.bindingHandlers.jqAutoresize = {
    init: function(element, valueAccessor) {
        var options = ko.utils.unwrapObservable(valueAccessor()) || {};

        $(element).autoResize(options);
    }
};

像这样更新您的观点：

<div data-bind="foreach: Rows" >
  <textarea data-bind="jqAutoresize: {}, value: RowText" ></textarea>
</div>

Answer 2

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

这是一个例子：

<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 绑定将任何输入更改写入可观察的 value 变量。
computed 使用此值触发调整大小。这会自动创建一个订阅。

这比 keydown 方法更好，因为它处理 Right Mouse Button > cut

之类的东西

同样显示 event 等效项的示例：

var resizeToFitContent = function(el) {
  // 
  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>

使用knockout js自动增长textarea

Auto grow textarea with knockout js

html

javascript

frontend

knockout.js