Question

请考虑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，其中maxlength应该是20个字符。当字符数达到20时，它将停止，如果您尝试添加更多字符，它们将被删除。

请注意，这也必须适用于复制/粘贴：如果用户粘贴超过20个字符，则只会保留前20个字符，其余部分将被删除。

Answer 1

查看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()来做这类事情......

Answer 2

使用计算值仅部分解决了问题。基于该计算值禁用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>

Answer 3

这适用于3.0.0

    ko.bindingHandlers.maxLength = {
        update: function(element, valueAccessor, allBindings){
            if(allBindings().value()){
                allBindings()
                  .value(allBindings().value().substr(0, valueAccessor()));
            }
        }
    }

  <textarea data-bind="value: message, 
                       maxLength: 255, 
                       valueUpdate: 'afterkeydown'"></textarea>

Answer 4

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

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

在viewModel？

中使用它

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

Answer 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/

如何用字符计数器和最大长度构建textarea？

5 个答案: