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

Posted 2023-05-07

【中文标题】如何使用字符计数器和最大长度构建文本区域？

【英文标题】：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 个字符会保留，其余的应删除。

【问题讨论】：

如果我的回答解决了您的问题，请采纳。谢谢！

***.com/a/26503523/118153 是一个不错的解决方案。

【参考方案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/