O cursor se move para o início do texto quando eu atualizo o texto com javascript

Estou usando contenteditable para permitir que os usuários editem informações na página da Web, mas alguns campos têm um requisito de comprimento, e quero que eles saibam quando atingiram esse requisito. Portanto, altero a cor do texto que será cortado quando eles retornam ao vermelho.

O problema é que, quando o texto é alterado com JavaScript, o navegador move o cursor para a frente da string. Alguém sabe de uma maneira que eu possa impedir esse comportamento? Tanto quanto posso dizer, isso é um problema em todos os navegadores.

Aqui está um 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>");
    }
});