Simulating a keypress in Firefox

Last night, I was working on Barra de Español and had spent quite a bit of time on Google looking for how to simulate a keypress in Firefox. It’s as simple as creating an event and dispatching it, though how to do so is not exactly intuitive. I needed to be able to do this because inserting accented characters from Barra de Español was not working in the message body textbox in Gmail and other webmail apps.

The way I inserted the characters before was to find the currently focused element, assume it was a textbox, and modify its value using the selectionStart property to know where the cursor was. Once I learned that the message body textbox could not be found using document.commandDispatcher.focusedElement, (that’s what “if(!focused) focused = document.commandDispatcher.focusedWindow.document.activeElement;” is all about) I found that the element used by Gmail for the message body wasn’t even a textbox, and didn’t have a value or selectionStart properties.

So the solution is to create a keypress event and dispatch it, like so:

insertchar: function(ch)
{
    var focused = document.commandDispatcher.focusedElement;
    if(!focused) focused = document.commandDispatcher.focusedWindow.document.activeElement;
    var evt = document.createEvent("KeyboardEvent");
    evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, ch);
    focused.dispatchEvent(evt);
}

One important thing to note is that the parameter ch is not a character value, but an integer containing the character code you want to insert. So, for example, to insert the character ‘á’, ch must be the value 225. To find the values I needed I used the wonderful character lookup tool at http://leftlogic.com/lounge/articles/entity-lookup/.

Bonus tip: If you are developing a Firefox extension and are using a text file in your profile’s extension directory to point to the folder where your code is located, and you move your code to another folder, you will discover that Firefox won’t load your extension, even though you edited the text file with the new location. The fix is to find a file in your profile directory called extensions.cache and delete it. This frustrated me for at least an hour last night, and Google failed me on this.

Tags: , , , ,

5 Responses to “Simulating a keypress in Firefox”

  1. sumeet Says:

    hi,
    your blog is very helpful I managed to simulate keypress inside textbox .
    Thank you.

  2. sumeet Says:

    Here is what I did

    PART OF BODY

    IN HEAD SECTION
    function press_a_key()
    { document.forms[0].t1.focus();
    var evt = document.createEvent(“KeyboardEvent”);
    evt.initKeyEvent(“keypress”, true, true, null, false, false, false, false, 0, 97);
    document.forms[0].t1.dispatchEvent(evt);
    }

    This has worked. it types ‘a’ inside text area .

    I tried to set ctrlarg to true yet the effect of ctrl+a in textarea which should select everything did not happen.
    What do you suggest ?

    Thank you.

  3. Peter Says:

    I am happy you found this blog post useful! I don’t know off-hand how to select all of the text, but I think maybe this link may be able to help you: http://stackoverflow.com/questions/2813612/firefox-select-text-range

  4. sumeet Says:

    hi
    I am creating an addon which will transliterate english to hindi just like google provides except it would work offline but won’t provide any suggestion to user.
    Have you created firefox addons so that I can ask you further ?
    Please reply me via e-mail .
    https://developer.mozilla.org/en/XUL_School provides tutorial (which I am reading) but it would be easier to take help from developer , if possible.
    Thank You.

    Also , I will soon inform you about ‘did I get range selection working?’

    Thanks again for prompt reply.

  5. sumeet inani Says:

    my web page uses javascript to transliterate english to hindi . It is working fine . Now I am not able to figure out a way to find text area on web page being browsed . Firstly , chat box on imo.im or gmail is wrapped in div or span id .
    Can you help me in this regard ?
    Somebody at mozilla zine suggested me to ‘ask user to press shortcut key combination that will invoke the addon and send the id of element from where keystroke originated’ . Don’t know how to do that too ?
    Also – is there a way to edit contents of address bar in firefox ?

    If you can answer any of these questions , I will be grateful to you.