Używam contenteditable, aby umożliwić użytkownikom edytowanie informacji na stronie internetowej, ale niektóre pola mają wymaganą długość, i chcę, aby wiedzieli, kiedy osiągnęli to wymaganie, więc zmieniam kolor tekstu, który zostanie odcięty gdy trafią, wróć do czerwonego.

Problem polega na tym, że gdy tekst jest zmieniany za pomocą JavaScript, przeglądarka przesuwa kursor na przód łańcucha. Czy ktoś wie, w jaki sposób mogę zapobiec temu zachowaniu? O ile mogę to powiedzieć, jest to problem we wszystkich przeglądarkach.

Oto 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>");
    }
});