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 の fiddleで行われたように)、実際には問題は解決しません。これを機能させるには、カスタム バインディングを使用する必要があります。そのフィドルを出発点として使用して、カスタム バインディングを使用して完成させることができます。

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()){
                allBindings()
                  .value(allBindings().value().substr(0, valueAccessor()));
            }
        }
    }

  <textarea data-bind="値: メッセージ、
                       最大長: 255,
                       valueUpdate: 'afterkeydown'"></textarea>
于 2014-03-19T20:20:32.533 に答える
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 に答える
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 に答える