如果字符太多,请不要输入textarea

Question

我正在尝试执行以下功能.显示textarea中剩余的字符数,如果已超过最大数字,则禁止输入任何其他字符.

我对如何实现这一点很困惑.现在我有这样的事情:

<textarea data-bind="textInput: message"></textarea>
<p>Characters left : <span data-bind="text: charLeft"></span></p>

function Vm_app() {
    var self = this;
    this.message = ko.observable('');
    this.charLeft = ko.pureComputed(function(){
        return 128 - self.message().length;
    });
}
ko.applyBindings(new Vm_app());

知道我该怎么办？

PS我知道如何通过监听事件来实现任务,但我不想打破MVVM范式.

PS2链接的答案一旦禁用,就不允许继续添加文本.我只想禁止写新字符(一个人可以点击删除,退格).

Answer 1

正如我之前所说,你最好不要限制超过一定长度的打字.当你想要拦截这些类型的东西时,有许多事情需要考虑,你需要解决许多极端情况才能让它自然地工作.更重要的是,至少在他们尝试提交之前,用户能够输入他们想要输入的所有内容并且没有任何限制,这将是一个更好的体验.那时你可以强制执行它需要一定的长度.

随着中说,有有一些事情可以做,以使这项工作非常接近.您可以采取许多方法来强制执行此操作.可能最简单的方法是创建一个委托observable,它可以拦截对你的observable的写入.然后,您可以根据需要检查长度并设置值,或忽略它.你可以将这一切都保留在扩展器中.

ko.extenders.maxlength = function (target, maxlength) {
    var view = ko.dependentObservable({
        read: target,
        write: function (value) {
            if (value.length <= maxlength) {
                target(value);
            } else {
                view.notifySubscribers(target()); // "refresh" the view
            }
        }
    });
    target.view = view;
    target.maxlength = maxlength;
    return target;
};

然后使用它:

this.message = ko.observable('').extend({ maxlength: 128 });

然后绑定到视图:

<textarea data-bind="textInput: message.view"></textarea>

请注意,当"刷新"时,光标将始终移动到最后.只是设置值的本质.如果要保留光标位置,则还必须重置该位置.

小提琴