javascript - 如何限制 <textarea> 中的行数？

Question

给定这段代码:

<textarea rows="4" cols="50"></textarea>

有 4 行要输入。

但是，当用户按下回车键或当文本溢出到第 5 行时，您将如何应用 CSS 来禁用另一行？

Answer 1

要限制行(行)使用 JavaScript .您将需要通过 input 执行此操作事件，

要拆分数组中的行，您可以使用 String.prototype.split() , 之后可以使用 Array.prototype.slice(start, end) 控制限制，start 必须有 0，这将是获得的第一行，end 是所需的最大行数。最后，我们将数组连接成一个字符串。

看例子:

Note that I used setTimeout to avoid multiple executions in case the user holds any key interruptly.

function limitText(textarea, limit) {
    function limitLines() {
        // split lines
        var lines = textarea.value.split("\n");

        if (lines.length > limit) {
            textarea.value = lines.slice(0, limit).join("\n");
        }
    }

    // Limite on add event
    limitLines();

    var timeout;

    textarea.addEventListener("input", function () {
        clearTimeout(timeout);
        timeout = setTimeout(limitLines, 1);
    });
}

limitText(document.getElementById("txtField1"), 4);
limitText(document.getElementById("txtField2"), 4);

<textarea rows="4" cols="50" id="txtField1">1
2
3
4</textarea>

<textarea rows="4" cols="50" id="txtField2">a
b
c
d</textarea>