9

请考虑这个 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 个字符会保留，其余的应删除。

4

5 回答 5

7

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

于 2012-10-19T21:27:15.607 回答
7

使用计算值只能部分解决问题。根据该计算值禁用文本区域（如Michael Berkompas 的小提琴中所做的那样）并不能真正解决问题。您需要使用自定义绑定来完成这项工作。使用那个小提琴作为起点，我们可以使用自定义绑定来完成它：

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>
于 2012-11-27T08:39:43.933 回答
1

这在 3.0.0 中对我有用

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

  <textarea data-bind="value: 消息，
                       最大长度：255，
                       valueUpdate: 'afterkeydown'"></textarea>
于 2014-03-19T20:20:32.533 回答
0

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

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

在viewModel中有这个？

function enforceMaxlength(data, event) {
        if (event.target.value.length >= maxlength) {
            return false;
        }
        return true;
    }
于 2014-02-26T21:43:52.513 回答
0

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/

于 2021-04-01T10:03:45.830 回答