greasemonkey scripts

How to Type Spanish Accents on an English Keyboard

8 February 2007

This page is a demo for a Javascript script which enables easy typing of Spanish accented characters on an English keyboard. If works by defining the F2 key to mean "toggle the character before the cursor from normal ASCII character to special Spanish character". The script has been tested on the Windows versions of Firefox 1.5, Opera and Internet Explorer 7. It can be installed as a GreaseMonkey script on Firefox.

The ASCII characters that it acts on are: A a E e I i N n O o U u ? ! $ ' "

The sequences of characters that toggle are: AÁ   a᪠  EÉ   eé   IÍ   ií   NÑ   nñ   OÓ   oóº   UÚÜ   uúü   ?¿   !¡   $€   "«»   '‹› .

(Note that a, o, u, U, ' and " have more than one alternative character, so you have to press F2 three times to get back to where you started. See also this page, which is used to generate character codes used in the script.)

Try it out now ...

For example, to type 1º frase: ¡Hola! ¿Como estás?, type the following keystrokes into the text area below:

1 o [F2] [F2] [space] f r a s e : [space] ! [F2] H o l a ! [space] ? [F2] C o m o [space] e s t a [F2] s ?

Or here:

Rich Text Editing

The script also works in rich text fields. To test it on this page, press F7 to enable the text cursor (in Firefox), click anywhere to place the text cursor and then press F2 to toggle the character just before the cursor.


To be able to use this functionality on any website, you need to do the following:

You can test the installation into GreaseMonkey by visiting test-for-greasemonkey.html which has a text area and text input similar to this page, but without the toggling function installed (and don't forget to refresh any pages after the install to pick up the new functionality).

If You Cannot Install It ...

You can use this scratchpad page which has a large textarea with F2 defined the same as on this page.

Bugs and Limitations

  1. In rich text fields, the toggle function does not work if the cursor is at the beginning of a node. Typically this will occur at the boundary between two different types of text, e.g. normal and bold, and even then it only happens if you use arrow keys or the mouse to move the cursor backward. The browser does not give any direct visual indication between the end of a node and the beginning of the next node (i.e. they are in identical physical locations on the screen). To navigate from the beginning of a node to the end of the previous node, so that you can toggle the last character of the previous node, move back one position and then forward one position.
  2. In Web pages that dynamically construct new input fields, the script may fail to keep track of whether or not it is in an HTML textarea, and HTML input or in a rich text field. This may cause the functionality to fail when the focus is on an input field that was constructed dynamically. (In theory there are DOM event handlers that could be used to track these changes, but they don't seem to work to track the changes that GMail can make to the current web page. See below for a workaround.)
  3. In Internet Explorer (version 7), sometimes if you click on the end of a field, and then execute F2, the cursor moves to behind the last character, after toggling it. I'm not too sure of the cause or the cure for this problem. (It doesn't happen while you are typing within one field.)
  4. In Opera the demo doesn't work because F2 brings up the "Go to Page" dialog. (And there seems to be no way to disable this within the page Javascript.) This browser definition of F2 can be disabled by going to Tools:Preferences...:Advanced:Shortcuts, editing the "Keyboard Setup", finding "F2" in the "Application" section, and either deleting it, or changing it to "F2 alt".
  5. If the script installed in GreaseMonkey sees what looks like a page explicitly loading the same script, i.e. a "script" element with "src" value ending in "/toggle-spanish-accents.user.js", then it does not activate the functionality a second time (to avoid a double response to F2). This could lead to spurious de-activation (i.e. someone loads a script on a page called "something/toggle-spanish-accents.user.js" which is not actually the same script). To disable the disabling, edit the script file to set the value of disableIfLoadedExplicitly to false.

Reset Function

As an experiment, I have assigned Alt-F2 to a function which resets the list of text input fields (and shows a dialog box confirming the reset). This is a workaround to item 2 in the list. So, for example, if you are in GMail and you switch from "Rich Formatting" to "Plain Text", the accent toggling will fail because the focus tracking has not been set on the new textarea control for the plain text input. If you press Alt-F2 this will pick up the new textarea, and it will work again.

Design Considerations

There seem to exist various means for typing Spanish accented characters on an English keyboard. The advantages of the system provided here are:

Possible problems:


For older information on implementing the same functionality in Emacs, see here.