Question

我目前很难在达到最大行数后，让Enter键停止在textarea中创建新行。行数作为参数传递给我所创建的组件。我的textarea是一个Redactor编辑器，新行由换行符分隔。

我有一个计算的observable，它根据文本中的换行符数确定行数，并返回正确的值：

self.numberOfRows = ko.computed(function () {
        return self.value().split(/<br>/).length;
    }, this);

在我的Redactor设置中，我有一个keydownCallback函数，它将行数与最大行数进行比较，并且应该阻止enter键在达到或超过max时创建一个新行：

keydownCallback: function (e) {
            if (e.keyCode > 48 || e.keyCode === 32) {
                if (self.remainingCharacters() <= 0) {                    
                    e.preventDefault();
                }
            } else if (e.keyCode === 13) {
                if (self.maxRows != null) {
                    if (self.numberOfRows() >= self.maxRows) {
                        e.preventDefault();
                    }
                }
            }
        },

回调函数的第一部分限制了字符数并且工作正常，但是回车键仍然会创建新行。我也试过“返回假”;而不是preventDefault，我也在preventDefault之前尝试过stopPropagation，但没有运气。我并不担心用户将值粘贴到textarea中，我也不关心自动换行。建议？

分开的回调：

        enterCallback: function(e) {
            if (self.maxRows != null) {
                if (self.numberOfRows() >= self.maxRows) {
                    return false;
                }
            }
        },
        keydownCallback: function (e) {
            if (e.keyCode > 48 || e.keyCode === 32) {
                if (self.remainingCharacters() <= 0) {
                    e.preventDefault();
                }
            }
        },

Answer 1

<强>更新

有机会玩Redactor并注意到当我按下返回时，不会插入 ，而是创建新的标签。空段落将包含 。所以textarea的实际价值如下：

<h2>Foo</h2>
<p>Bar
</p>
<p>Buz
</p>

我汇总了一个关于如何处理这个问题的概念的最小证据

$('#content').redactor({
    focus: true,
    enterCallback: function(e)
    {
        var lines = this.code.get().split(/\r?\n/g).length;
        console.log(this.code.get(), lines);
        if (lines > 3) { // self.numberOfRows()
            return false;
        }
    },
    keydownCallback: function(e)
    {
        //
    }
});

我不确定是否通过关闭像this.code.get().split(/<\/(p|h[1-6])>/)这样的标签来分割新行比分割更可靠。

我会更新self.numberOfRows函数中的正则表达式，以便用新行或结束标记进行拆分

原始答案

你检查了他们的docs吗？ enter和keyup似乎有两个单独的回调：

您可以在此回调中返回false以阻止Redactor 处理输入/返回键输入。它允许您开发自定义这次活动的处理程序。

$('#redactor').redactor({
    callbacks: {
        enter: function(e)
        {
            console.log(this.code.get());
            return false;
        }
    }   
});

另外，如果你查看他们的Limiter plugin，它只会返回false：

if (count >= this.opts.limiter)
{
    return false;
}

如何限制Textarea（Redactor）中的行数？

1 个答案: