Estoy usando contenteditable para permitir a los usuarios editar información en la página web, pero algunos campos tienen un requisito de longitud, y quiero que sepan cuándo han alcanzado ese requisito, así que cambio el color del texto que se cortará Cuando golpean vuelven a rojo.

El problema es que cuando el texto se cambia con JavaScript, el navegador mueve el cursor al frente de la cadena. ¿Alguien sabe de alguna manera puedo prevenir este comportamiento? Por lo que puedo decir, esto es un problema en todos los navegadores.

Aquí hay un 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>");
    }
});