使用剔除数据绑定基于内容初始化文本区域的高度答案

【问题标题】：Initializing the height of a textarea based on the content using a knockout data-bind使用剔除数据绑定基于内容初始化文本区域的高度
【发布时间】：2014-12-29 11:41:05
【问题描述】：

我目前正在扩展和折叠keyupevent 上的文本区域的高度。但是，一旦通过敲除自定义绑定将值绑定到文本区域，我也希望文本区域初始化它的高度。有什么解决办法吗？ （仅使用 javascript）（不添加任何 jquery 库）

当前按键处理代码

var textElement = $textBox.get(0);
var textElementOriginalHeight = $textBox.height();

while ($textBox.height() > textElementOriginalHeight && textElement.scrollHeight < textElement.offsetHeight) {
                $textBox.height($textBox.height() - 1);
            }

            var h = 0;

            while (textElement.scrollHeight > textElement.offsetHeight && h !== textElement.offsetHeight) {
                h = textElement.offsetHeight;
                $textBox.height($textBox.height() + 1);
            }

【问题讨论】：

显示你当前的keyup处理代码。
嗨 haim770 :) 我已经添加了代码 sn-p... 这是在 keyup 方法中执行的
请更新您的问题并确保它包含您的情况的小副本，最好在堆栈片段中（在编辑器工具栏上）。如果您注意代码的格式，它也会有所帮助，它越容易阅读，就越容易（并且更有吸引力）。 - 另外，无论如何：您尝试过使用custom binding 了吗？

标签： html data-binding knockout.js textarea expand

【解决方案1】：

您需要注册一个自定义的binding-handler 才能做到这一点。比如：

(function(ko)
{
     function handleAutoFit(textElement, val)
     {
        if (!textElement.value)
            textElement.value = val;

        var $textBox = $(textElement);
        var textElementOriginalHeight = $textBox.height();

        while ($textBox.height() > textElementOriginalHeight && textElement.scrollHeight < textElement.offsetHeight) {
            $textBox.height($textBox.height() - 1);
        }

        var h = 0;

        while (textElement.scrollHeight > textElement.offsetHeight && h !== textElement.offsetHeight) {
            h = textElement.offsetHeight;
            $textBox.height($textBox.height() + 1);
        }
     }

    ko.bindingHandlers.autoFit = {
        update: function (element, valueAccessor) {
            var val = ko.unwrap(valueAccessor());
            handleAutoFit(element, val);
        }
    };
})(ko);

HTML：

<textarea data-bind="autoFit: someObservable, value: someObservable, valueUpdate: 'afterkeydown'"></textarea>

或者，如果您使用的是 Knockout 3.1 及更高版本：

<textarea data-bind="autoFit: someObservable, textInput: someObservable"></textarea>

见Fiddle

【讨论】：

嗨haim770。 This is great... but if you add a very long text 'this.name = ko.observable('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'); }' 最初它没有展开。如果它最初采用其内容的高度，那就太好了
@user2726225 然后呢？
您好，编辑的评论如上...抱歉给您带来的不便:)（第 1 条评论）
嗨 haim770 :)...这几乎就在那里...我认为您将更新和初始化混为一谈...我想我可以完成这项工作，以便文本区域始终占据根据可用文本所需的高度...我会尽快通知您:)
这正是我想要的，没有使用 jquery 库:) jsfiddle.net/3p9bj/47