自动增长textarea与淘汰赛js

Question

我已经实现了在keyup事件中自动扩展textarea高度的逻辑。但是，我希望textarea在通过敲除自定义绑定将值绑定到textarea时也初始化它的高度。任何解决方案

Answer 1

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

下面是一个例子：

<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使用此值触发调整大小。这会自动创建订阅。

这比​​方法更好，因为它用的东西涉及像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) { 
 
    \t 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>

Answer 2

您可以创建自定义的绑定将应用于autoresize()所有文字区域（仅利用KnockoutJS的，不使用jQuery或任何其他库）：

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>