Подсветка отдельных символов

[igor_ch]

Доброе время суток.
нужна помощь в следующем вопросе.
Мне нужно сделать, что-бы при вводе текста, определенные символы окрашивались в определенные цвета (например латинские символы в синий цвет).
Попытался реализовать через:

<p contenteditable="true" id="inp_text"></p>

но, к сожалению,

document.execCommand("foreColor",false,"#00F")

требует предварительно вручную выделить символ, что мне не подходит, поскольку символы должны окрашиваться "на лету" при вводе.

Подскажите, может есть другие способы реализовать данную задумку.
Буду очень благодарен за подсказку.

[danik.js]

Находи нужный символ и оборачивай его в <span style="bla bla">..</span>
Если объем текста небольшой - тормозов возникнуть не должно.

[igor_ch]

Находи нужный символ и оборачивай его в <span style="bla bla">..</span>

Проблема в том, что тогда теряется позиция курсора в тексте (в случае, если пользователь вводит символ в средине текста).

[danik.js]

Проблема в том, что тогда теряется позиция курсора в тексте (в случае, если пользователь вводит символ в средине текста).

Значит нужно перед заменой запоминать позицию курсора и восстанавливать после замены. Твиттер же как-то решил эту проблему )

[igor_ch]

Как запоминать позицию курсора я в инете нашел, а вот как восстанавливать после замены - ничего не нашел.
Все рабочие примеры, что мне попадались только для <input> или <textarea>

Твиттер же как-то решил эту проблему

к сожалению решение твитера мне пока не по зубах. я в javascrip еще новичок. Жаль, что они это в свой бутстрап не добавили. было бы проще

[danik.js]

Жаль, что они это в свой бутстрап не добавили

Добавлять в бутстрап хрень, которая нужна одному из миллиона?

[Deff]

Как запоминать позицию курсора я в инете нашел, а вот как восстанавливать после замены - ничего не нашел.

Изначально, перед вставкой, вставляете за текущей позицией курсора тег <a id="thispostion"></a>, после замены, - ищите позицию тега, а тег -удаляете

[igor_ch]

Вот что у меня в результате получилось:

document.getElementById('inp_symbols').onkeypress = function (e) {
            var e = e || window.event,
                target = e.target || e.srcElement;
                isIE = document.all;
                code = isIE ? e.keyCode : e.which,
                data = {};

            if (target.nodeName != 'INPUT' && target.nodeName != 'TEXTAREA') {
                if (code == 27) {
                    // restore state
                    document.execCommand('undo');
                    target.blur();
                    return true;
                } else{
                    if (code == 13) {
                        // save
                        data[target.getAttribute('data-name')] = target.innerHTML;
                        target.blur();
                        e.preventDefault();
                        return true;
                    }
                }

                if (code<32 || e.ctrlKey || e.altKey) return true;

                var color = 'red-color',
                    sym = String.fromCharCode(code);
                if(sym.search(/[a-zA-Z]/) !== -1){
                    color = 'blue_symbol';
                }else{
                    if(sym.search(/[0-9]/) !== -1){
                        color = 'gray_symbol';
                    }
                }

                //вставка элемента в текущую точку ввода
                if (isIE) {//IE
                    var rng = document.selection.createRange();
                    rng.pasteHTML('<span class="'+color+'">'+sym+'</span>');
                }else{//other
                    document.execCommand('insertHTML', false, '<span class="'+color+'">'+sym+'</span>');
                }

                return false;
            }
        };

где document.getElementById('inp_symbols') это

<p id="inp_symbols" contenteditable="true" data-name="title" spellcheck="false"></p>

ну и CSS:

<style type="text/css">
.blue_symbol{
        color:blue;
    }
    .gray_symbol{
        color:gray;
    }
    .red-color{
        color:red;
    }
</style>