Как ограничить количество строк в contenteditable div

Question

Как видно из заголовка, у меня есть contenteditable div и я хотел бы ограничить максимальное количество строк до X. Как мне сделать это с помощью jQuery или JS.

Edit 2: Как это создает div для новых строк, как я могу сделать так, чтобы он продолжался с последней строки (limit - max line) при вставке текста?

Answer 1

Я пытался добавить код для моего примера JavaScript в моем предыдущем комментарии, но не мог понять, как это сделать. Итак ... вот оно; Я надеюсь.

<script type="text/javascript">
    var tBox = document.getElementById("test");
    tbox.on("keyup", function () {
        if (tBox.innerText.length > 5) {
            tBox.prop("contenteditable", false);
        }
    });
</script>

Answer 2

Вы можете использовать jQuery для подсчета количества новых div, созданных как разрывы строк внутри вашего contenteditable div, и удалите свойство contenteditable, если это число достигает заданного предела.

Примечание: это может не работать с IE, потому что, насколько я знаю, IE использует <p> для новых строк.

HTML:

<div id="test" contenteditable="true">--- Insert text here ---</div>

JQuery:

$(function(){
    $("#test").on("keyup", function(){
        if ($("#test div").length > 5) {
            $("#test").prop("contenteditable" , false);
        }
    });
});