如果字符太多，则不允许在textarea中输入 [英] Do not allow typing in textarea if it has too many characters

问题描述

我正在尝试执行以下功能.显示文本区域中剩余的字符数，如果已经超过最大字符数，则不允许输入其他任何字符.

I am trying to do the following functionality. Show a number of characters left in the textarea and disallow entering anything else if you already exceeded the maximum number.

我对如何实现这一目标感到困惑.现在，我有了类似的东西:

I am confused with how to achieve this. Now I have something like this:

<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());

任何想法我应该如何进行?

Any idea how should I proceed?

PS .我知道如何通过侦听事件来完成任务，但是我不想破坏MVVM范例.

P.S. I know how to achieve the task with listening for events, but I do not want to break MVVM paradigm.

P.S.2 (链接的答案)一旦被禁用，将不允许继续添加文本.我只想禁止写新字符(一个人将可以单击删除，退格键.)

P.S.2 the linked answer does not allow to continue adding the text, once you disabled it. I want only to disallow writing new characters (a person will be able to click delete, backspace).

推荐答案

正如我之前所说，最好不要尝试限制键入超过一定长度.当您想拦截这类事情时，有很多事情要考虑，很多情况下，您必须努力使其自然工作.更重要的是，对于用户来说，至少在尝试提交之前，可以无限制地键入他们想要键入的所有内容，这将是一种更好的体验.然后，您可以强制将其设置为一定长度.

As I stated earlier, you'd be better off not trying to restrict typing beyond a certain length. There are many things to consider when you want to intercept these sorts of things, many corner cases you would have to work around to have it work naturally. And more importantly, it would be a much better experience for the user to be able to type out all that they want to type with no restrictions, at least until they try to submit. Then that's when you can enforce that it needs to be a certain length.

话虽这么说，您可以做一些 使这项工作足够接近.您可以采用多种方法来执行此操作.可能最简单的方法是创建一个委托的可观察对象，它可以拦截对您的可观察对象的写入.然后，您可以检查长度(如果合适)并设置该值，或者忽略它.您可以将这些全部独立包含在扩展器中.

With that said, there are some things you can do to make this work close enough. There are many approaches you can take to enforce this. Probably the simplest approach would be to create a delegating observable which can intercept writes to your observable. You could then check the length if appropriate and set the value, or ignore it. You could keep this all self-contained in an extender.

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>

请注意，当刷新"时，光标将始终移至末尾.设置值的本质.如果要保留光标位置，则也必须将其重置.

Just note that when "refreshing", the cursor will always be moved to the end. Just the nature of setting the values. If you want to preserve the cursor position, you'll have to reset that as well.

小提琴

这篇关于如果字符太多，则不允许在textarea中输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！