Vulpeculox home page Tech stuff (PHP,JS,jQuery,CSS,MySQL,Testing,Design...)

AX functionality in javascript

All accents, any language, one function key

The principle is very simple. Place the cursor to the right of a character to be modified then press F8. This changes the character. Press again for the next accent and so on in a cycle. This works for fresh typing or editing.

But native AX only works in Windows...

The AX package you can download from here only works on Windows.

...So here is a browser-based solution

Perhaps you want to write a web application that works with all browsers which allows the same easy access to accents and symbols. If so this is what you're looking for.
Download Javascript solution Reference sheet

See it in action here and now

This web page (included in the download) shows how to use the code.

Editing

Attached to input or textarea elements with
jQuery style $('#myEditArea').keyup(ax.Edit); Inline style <textarea onkeypress="ax.Edit(event);" rows=5 cols=40> English: Stars at the cafe. French: étoiles à le café </textarea>
Edit me and use F8 after a or e.

Basic user instructions

Full instructions are up to the web page builder of course.
Pick from the list

Currently available cycles

Pick a set of cycles

The programmer can allow the user to select any cycle.
Pick from the list
(Then see the difference in the edit area above.)

Remembering language

The last cycle, user help language and trigger key are automatically stored in local storage. Reload with ax.LoadCfg()

Technical notes

Get started

The only file you need is ax.js. This is part of the download package. Obviously you have to put it in the head.
<script type="text/javascript" src="./ax.js"></script>

Initialise

There are three possible settings. On a modern browser these will be stored locally between sessions so you might want to check to see if these have been set first before deciding for the user. Note that the help language has nothing whatsoever to do with any language in the cycles.
This goes in the page-ready section if(! ax.LoadCfg()){ // false if not loaded locally var uh = ax.GetUserHelp('en'); // give help in English ax.SetCycle('French'); // use french accents }

Attach to editable fields

See above for how to attach the ax.Edit() function to an edit box or text area.

Changing help language and cycles

This is illustrated above. The important thing when calling GetUserHelp() and SetCycle() is to set the optional second parameter true. This will force any existing value to be overridden.

Adding onto an existing editor

Make sure you've set up a cycle then when your editing code has a character it wants to modify give it to NextInCycle(). This will return either a new character or false if there is nothing to do.