Показать сообщение отдельно
  #8 (permalink)  
Старый 02.07.2013, 13:26
Новичок на форуме
Отправить личное сообщение для igor_ch Посмотреть профиль Найти все сообщения от igor_ch
 
Регистрация: 23.12.2010
Сообщений: 9

Вот что у меня в результате получилось:
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>
Ответить с цитированием