使用Knockout JS自动调整文本框大小

Question

我已经在keyup事件中实现了自动扩展textarea高度的逻辑，但是我希望当值通过knockout自定义绑定绑定到textarea时，textarea也要初始化其高度。有什么解决方法吗？（只使用KnockoutJS，不使用jQuery或任何其他库。）

- user2235768

Answer 1

我强烈建议不要使用事件来触发调整大小。相反，您可以使用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方法更好，因为它可以处理像右键 > 剪切这样的操作。

以下是一个展示等效于event的示例：

var resizeToFitContent = function(el) {
  // https://dev59.com/e3NA5IYBdhLWcg3wWseK#995374
  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>

- user3297291

Answer 2

您可以创建自定义绑定，将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>

- amit 1984

---

非常感谢您回答我的问题，我是 knockout js 的新手。它没有起作用，如何在 autoresize() 上创建自定义绑定？如果您能在 JSfiddle 中设置它，那就太好了，您介意吗？ - user2235768

在 Knockout 中，使用绑定处理程序绝对是正确的方法。要实际检查文本区域是否需要调整大小更加棘手，您需要获取文本区域的值并检查字符串的长度。然后，您可能需要在何时增加文本区域大小方面做出明智的决策。基本上，您需要将 textarea.value.length 与 textarea.rows 进行比较。 - dpix