Javascript::How to identify what the character (or string) was inserted on a editable div?

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

I'm not sure I entirely understand what you are trying to do but it seems that you wish to capture user input into a div with the contentEditable attribute. If I were using Mootools and Firebug I would begin with the following::

$('idOfEditableDiv').addEvent('keydown', function(event) {
    console.log(event.key);
    });

That will print into the Firebug console any key that is pressed inside the content editable div. So if I press the 'a' key, 'a' will be printed. This can be useful if you are looking to capture input that doesn't have an obvious value such as the Caps Lock key. Logging the entire event with console.log(event) can give you even more useful information.

When you have identified which keys you wish to capture (say the a and b keys), then do the following:

$('idOfEditableDiv').addEvent('keydown', function(event) {
    if(event.key == 'a' || event.key == 'b') {
        //do stuff here if the a or b key was pressed
        }
    });

Sometimes you might want to do stuff if the a key was pressed and other stuff if the b key was pressed. In that case, do the following:

$('idOfEditableDiv').addEvent('keydown', function(event) {
    if(event.key == 'a') {
        //do stuff here if the a key was pressed
        }
    else if(event.key == 'b') {
        //do stuff here if the b key was pressed
        }
    });

In case you aren't familiar with Mootools, you would need to wrap all your Mootools code in a domReady event like this:

window.addEvent('domready', function() {
    $('idOfEditableDiv').addEvent('keydown', function(event) {
        if(event.key == 'a') {
            //do stuff here if the a key was pressed
            }
        else if(event.key == 'b') {
            //do stuff here if the b key was pressed
            }
        });
    });

More information about Mootools Events

Answer 2

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);
}