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