如何使用字符计数器和最大长度构建文本区域？答案

【问题标题】：How to build a textarea with character counter and max length?如何使用字符计数器和最大长度构建文本区域？
【发布时间】：2012-10-10 13:26:42
【问题描述】：

请考虑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);

我有一个最大长度应为 20 个字符的文本区域。当字符数达到 20 个时，将停止，如果您尝试添加更多字符，它们将被删除。

请注意，这也适用于复制/粘贴：如果用户粘贴的字符超过 20 个，则只有前 20 个字符会保留，其余的应删除。

【问题讨论】：

如果我的回答解决了您的问题，请采纳。谢谢！
stackoverflow.com/a/26503523/118153 是一个不错的解决方案。

标签： knockout.js knockout-2.0

【解决方案1】：

使用计算值只能部分解决问题。基于该计算值禁用文本区域（如在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>

【讨论】：

很棒的解决方案，但它在 KnockoutJS 3.0 中不起作用。知道为什么吗？
@BrianDavidBerman，不知道。我停止使用 Knockout 转而使用 Angular 并且没有回头。
我用 KnockoutJS 3.0 查看了它。这是那个小提琴：jsfiddle.net/R3Pxf

【解决方案2】：

看看this jsfiddle，它的工作原理如下：

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

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

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

<textarea data-bind="value: comment, valueUpdate: 'afterkeydown'"></textarea>
<br/><br/>
<span data-bind="text: count"></span> characters

你需要了解 ko.computed() 才能做这种事情......

【讨论】：

谢谢。仍然需要帮助将文本限制为仅 20 个字符。我仍然可以在 textarea 中输入超过 20 个。

【解决方案3】：

这在 3.0.0 中适用于我

ko.bindingHandlers.maxLength = { 更新：函数（元素，valueAccessor，allBindings）{ if(allBindings().value()){ 所有绑定（） .value(allBindings().value().substr(0, valueAccessor())); } } }

【讨论】：

【解决方案4】：

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

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

在 viewModel 中有这个？

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

【讨论】：

【解决方案5】：

textarea 有一个属性 maxlength。

对于你的问题，我找到了没有任何功能的方法：

<textarea style="resize: none;" data-bind="value: payComments, valueUpdate: 'afterkeydown', attr: { maxlength: payCommentsMaxlength }"></textarea>

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

  self.payCommentsMaxlength = "20";
  self.payComments = ko.observable("");  
  
  self.payCommentsCountAndMax = ko.computed(function() {
    return self.payCommentsMaxlength - self.payComments().length;
  });
}

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

我有一个类似的任务，你可以在这里查看：http://jsfiddle.net/KateKotova/h9cvj38L/12/

【讨论】：