http://jsfiddle.net/VzbYJ/86/

Por favor, dê uma olhada neste link. Como ele limpa, ele inserirá um nó de extensão no local do sinal de intercalação. O problema é que, depois de inserir o nó, se estou pressionando algum caractere, sua cor também é verde. porque também está vindo dentro do elemento span. Então, como posso colocar o cursor após o período para que a cor do próximo nó inserido permaneça normal.

Tentei encontrar o nó selecionado (com base na posição do sinal de intercalação), definir o intervalo após o elemento e usar o colapso (falso). Mas não consegui obter a saída desejada.

Código para encontrar o nó:

  function findNode(event)
  {
    if (event.type == 'click')
    par = event.target;

    else if (event.type == 'keyup'){        
        if (document.selection)
        par = document.selection.createRange().parentElement();
    else if (window.getSelection){
        var range = window.getSelection().getRangeAt(0);
        par = range.commonAncestorContainer.parentNode;
    }
  }

e depois defino o limite usando setEndAfter () ant collapse (false). Eu sou novo neste campo, por isso não tenho certeza de que extensão estou certa. Portanto, qualquer sugestão é muito apreciável. Desde já, obrigado.