Question

I want to know how to identify what the character inserted on a div editable…
I want to see if the user type a single or double quotation mark, and give a specific class to this quote to the text after the quote…
I think that is a onkey property or return… i don’t know…

Anyone has a tip ?

Answer 1

The keypress event is what you want, since that is the only event from which you can gather information about the character typed. You could handle the keypress yourself in the case of a quote. The code to insert a <span> with a CSS class is not covered here. I would suggest asking another question if you need help, or perhaps reading some documentation on DOM Ranges, TextRanges and selections in IE and other browsers.

function handleKeypress(evt) {
    evt = evt || window.event;
    var charCode = evt.which || evt.keyCode;
    var charStr = String.fromCharCode(charCode);
    if (charStr == "'" || charStr == '"') {
        // Code to insert quote character followed by <span> with CSS class
        // goes here.

        // Prevent the default action
        if (evt.preventDefault) {
            evt.preventDefault();
        } else {
            evt.returnValue = false;
        }
    }
}

var div = document.getElementById("your_div");
if (div.addEventListener) {
    div.addEventListener("keypress", handleKeypress, false);
} else if (div.attachEvent) {
    div.attachEvent("onkeypress", handleKeypress);
}