knockout.js 如何建立一个文本区与字符计数器和最大长度？

x7rlezfr 于 2022-11-10 发布在其他

关注(0)|答案(5)|浏览(121)

请考虑this jsfiddle，它包含以下内容：

<textarea data-bind="value: comment, valueUpdate: 'afterkyedown'"></textarea>

<br/><br/>
<span data-bind="text: getCount, valueUpdate: ['afterkeydown','propertychange','input']"></span> characters???

下面这个JavaScript：

var viewModel = function(){
    var self = this;

    self.count = ko.observable(0);
    self.comment = ko.observable("");
    self.getCount = function(){
        var countNum = 10 - self.comment().length;
        self.count(countNum);
    };
}

var viewModel12 = new viewModel();
ko.applyBindings(viewModel);

我有一个textarea，最大长度应该是20个字符。当字符数达到20时，它将停止，如果你试图添加更多的字符，它们将被删除。
请注意，这也必须适用于复制/粘贴：如果用户粘贴的字符超过20个，则只会保留前20个字符，其余的字符应该被删除。

knockout.js

来源：https://stackoverflow.com/questions/12982587/how-to-build-a-textarea-with-character-counter-and-max-length

5条答案

按热度按时间

vhipe2zx1#

使用计算值只能部分解决问题。基于计算值禁用textarea（如Michael Berkompas's fiddle中所做的）并不能真正解决问题。您需要使用custom binding来实现这一点。使用该小工具作为起点，我们可以使用自定义绑定来完善它：
http://jsfiddle.net/ReQrz/1/
大概是这样的：

ko.bindingHandlers.limitCharacters = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel)
    {
       element.value = element.value.substr(0, valueAccessor());
       allBindingsAccessor().value(element.value.substr(0, valueAccessor()));
    }
};

然后做着：

<textarea data-bind="value: comment, valueUpdate: 'afterkeydown', limitCharacters: 20"></textarea>

赞(0）回复(0）举报 2022-11-10

cclgggtu2#

看一下this jsfiddle，它的工作原理沿着：
第一个
您需要了解ko.computed()才能做这类事情...

赞(0）回复(0）举报 2022-11-10

guicsvcw3#

这对我在3.0.0中是有效的
第一个

赞(0）回复(0）举报 2022-11-10

w1e3prcc4#

为什么不在视图中做这样的事情：

<textarea data-bind="event: { keypress: enforceMaxlength }></textarea>

在viewModel中有这个吗？

function enforceMaxlength(data, event) {
        if (event.target.value.length >= maxlength) {
            return false;
        }
        return true;
    }

赞(0）回复(0）举报 2022-11-10

5us2dqdw5#

文本区域有一个属性maxlength。
对于你的问题，我找到了一个没有任何作用的办法：
第一个
我有一个类似的任务，你可以在这里浏览一下：http://jsfiddle.net/KateKotova/h9cvj38L/12/

赞(0）回复(0）举报 2022-11-10