Я использую contenteditable, чтобы позволить пользователям редактировать информацию на веб-странице, но у некоторых полей есть требование к длине, и я хочу, чтобы они знали, когда они достигли этого требования, поэтому я изменяю цвет текста, который будет обрезан. когда они ударяются, возвращаются к красному.

Проблема заключается в том, что когда текст изменяется с помощью JavaScript, браузер перемещает курсор в начало строки. Кто-нибудь знает, как я могу предотвратить это поведение? Насколько я могу сказать, это проблема во всех браузерах.

Вот JSFiddle.

$(element).keypress(function (event) {
    if ($(element).text().trim().length > maxChars) {
        $(element).html($(element).text().trim().substr(0, maxChars) +
            "<span class=red>" + $(element).text().trim().substr(maxChars) + "</span>");
    }
});