/    Sign up×
Community /Pin to ProfileBookmark

Multi character mapping the [alt gr] key(?)

I was wondering if it was possible to program in JavaScript, something that was similar to how cell phones are able to scroll though a character map by the continuous pressing of the same key?

I was thinking of something like, holding down the [alt gr] key and have a change of letter state every time another key is pressed repeatedly. Most importantly, the specific alternative letters can be coded into the base letter.

ie. hold down [alt gr] + [standard “n” key]
= ṅ
…press n again
= ṇ
…press n again
= ñ

until [alt gr] is released.

Does anyone know how to do this, or could someone point me to a good tutorial about how JS deals with key presses?

Thanks.

to post a comment
JavaScript

16 Comments(s)

Copy linkTweet thisAlerts:
@KorOct 18.2010 — Before anything else, I must remind you that all the browsers have implemented key shortcuts, thus, for instance many combinations which use the ALT key will open some tool bar sub-menus (ALT+C, ALT+S, ALT+T,.... and so on...). So that, even if you might capture these combinations (which is, I said, a quite intricate thing across the browsers), you can not prevent their default behavior.
Copy linkTweet thisAlerts:
@007JulienOct 18.2010 — An old but instructive page about this «quite intricate thing» !
Copy linkTweet thisAlerts:
@KorOct 18.2010 — An old but instructive page about this «quite intricate thing» ![/QUOTE]
It is intricate for many reasons. The first one is that you need to capture [I]2 Key codes within the same event[/I]: onkeydown. The other one is that for a full crossbrowser code you might need to use other approach in case of Mac browsers to be able to capture some how the ALT key (the property [B]altKey[/B]). You may combine those (capturing ALT with altKey, and the other key with onkeydown/onkeyup, but it will not be possible, now, to capture the ALT onkeyup... Isn't that intricate enough?

Anyway, I have not bothered the OP with all these as, for me, the main obstacle remains the implemented default short keys. Just press ALT+T in Firefox or IE and see what happens.
Copy linkTweet thisAlerts:
@lekeauthorOct 18.2010 — Before anything else, I must remind you that all the browsers have implemented key shortcuts, thus, for instance many combinations which use the ALT key will open some tool bar sub-menus (ALT+C, ALT+S, ALT+T,.... and so on...). So that, even if you might capture these combinations (which is, I said, a quite intricate thing across the browsers), you can not prevent their default behavior.[/QUOTE]
Hi, thanks for the feedback. I was actually going to use the [alt gr] (alternative grammar (i think)) to achieve this. AFAIK, Alt gr has no shortcuts mapped to various combinations.

I could run in to problems because foreign keys are usually mapped when alt gr is pressed. I hope my code will suppress this though.

Thanks for the link 007Julien. I'll see what I can muster up from this.
Copy linkTweet thisAlerts:
@007JulienOct 18.2010 — [B]I wanted only illustrate Kor response[/B] (with my bad english language). I agree with his terms. It's ofen easier to read the input (after keyup) than to work work with keycode or keychar (after keypressed or keydown). In this conditions, it's quite impossible to catch digit witout text input (See this experimental page)
Copy linkTweet thisAlerts:
@lekeauthorOct 27.2010 — I managed to get what I wanted (kind of), but every time I press the "alt gr + a", all the typed text in the textarea is reset ?

Anyone know a workaround for this?

Here is my code (Currently only works for google chrome, and only the "a" character has anything mapped to it).
[CODE]<!DOCTYPE html>
<html><head><title>KeyBoard Input Test</title><meta charset="utf-8"><script type="text/javascript">

var alt_gr_bool = false; // checks whether the [alt gr] key is pressed or not
var array_position = 0; // monitors the array position

var foreign_array_A = ["u3041", "u30A1"]; // more to be added

document.onkeydown = enable_alt_gr;
document.onkeyup = reset_alt_gr;

function enable_alt_gr(e) { // What happens when [alt gr] is pressed.

if (e.keyCode == 0)
{
alt_gr_bool = true;
}

var KeyID = (window.event) ? event.keyCode : e.keyCode;

switch(KeyID) {
case 65: // The letter A/a
if (alt_gr_bool == true)
{
document.myForm.text_field.value = foreign_array_A[array_position];
e.preventDefault();
if (array_position < foreign_array_A.length - 1)
{
array_position ++;
}
else
{
array_position = 0;
}
}
break;
}
}

function reset_alt_gr(e) { // alt gr key is released. Everything back to normal.
if (e.keyCode == 0) {
alt_gr_bool = false;
array_position = 0;
}
}

</script></head><body>

<form name="myForm">
<textarea name="text_field" rows="10" cols="30"></textarea>
</form>

</body></html>
[/CODE]
Copy linkTweet thisAlerts:
@lekeauthorNov 03.2010 — Ok, finished it!

It still only works on Google's browser, but I'll find out why someday.

This version is for Finnish, so only "alt gr" + "a" and "o" keys will give the various characters mapped to them.

link: http://rebol.vlexo.net/Programming/keys/latin_keyboard.htm
Copy linkTweet thisAlerts:
@KorNov 03.2010 — I don't have ALTGR key. It is not a standard key. And I think that 80&#37; of the users don't have it either (keep in mind that the special keyboards with the ALTGR key are rather rare). It is true that on a standard US-International keyboard layout (and similar) the CTRL+ALT could supply the ALTGR functionality. Not in your case. Your code does not work for me (with CTRL+ALT instead of ALTGR), neither in Chrome, nor in any other browser.
Copy linkTweet thisAlerts:
@lekeauthorNov 03.2010 — I don't have ALTGR key. It is not a standard key. And I think that 80% of the users don't have it either (keep in mind that the special keyboards with the ALTGR key are rather rare). It is true that on a standard US-International keyboard layout (and similar) the CTRL+ALT could supply the ALTGR functionality. Not in your case. Your code does not work for me (with CTRL+ALT instead of ALTGR), neither in Chrome, nor in any other browser.[/QUOTE]
That's a pity. I was hoping more people would have it ?

Thanks for the info.
Copy linkTweet thisAlerts:
@KorNov 03.2010 — I must remind you that the Operating System (at least Window, which I commonly use) has the possibility to install different languages and a simple Language bar which can switch, at will, the meaning of some keys in order to return some special characters, characteristic of that foreign language. Of course, if the Font Family used permits that.

I am also using often that switch, as I am from Romania and our language, even if it is a Latin one, has several special characters. For instance, if I press the key "[" when my Language Bar is set to English, I get this: "[COLOR="Blue"][[/COLOR]". When I switch to Romanian, I get this:"[COLOR="Blue"]&#238;[/COLOR]".

So: what would be the use of your toy? To emulate the special characters in the absence of an installed Language Bar? Interesting and ambitious aim. I don't say it is impossible, but could it be really useful? The Romanians who know that behind the "[COLOR="Blue"][[/COLOR]" key may be found the "[COLOR="Blue"]&#238;[/COLOR]" character usually have installed the Romanian Language Bar on their computer, so that they might type that after a single click on the Language bar (or to use a shortcut - which can even be made as custom).

Don't mention that if I want to use that character I was told you ("[COLOR="Blue"]&#238;[/COLOR]") and I work on a computer which has no Romanian language installed, I now how to use the Keystroke ASCII combination: ALT+a numbers combination (right side NumPad numbars), thus for "[COLOR="Blue"]&#238;[/COLOR]" i know that I have to keep pressing the ALT key while I type on NumPad: 0238. When I release the ALT, my special character appears. ?

http://www.starr.net/is/type/altnum.htm
Copy linkTweet thisAlerts:
@lekeauthorNov 03.2010 — I must remind you that the Operating System (at least Window, which I commonly use) has the possibility to install different languages and a simple Language bar which can switch, at will, the meaning of some keys in order to return some special characters, characteristic of that foreign language. Of course, if the Font Family used permits that.

I am also using often that switch, as I am from Romania and our language, even if it is a Latin one, has several special characters. For instance, if I press the key "[" when my Language Bar is set to English, I get this: "[COLOR="Blue"][[/COLOR]". When I switch to Romanian, I get this:"[COLOR="Blue"]î[/COLOR]".

So: what would be the use of your toy? To emulate the special characters in the absence of an installed Language Bar? Interesting and ambitious aim. I don't say it is impossible, but could it be really useful? The Romanians who know that behind the "[COLOR="Blue"][[/COLOR]" key may be found the "[COLOR="Blue"]î[/COLOR]" character usually have installed the Romanian Language Bar on their computer, so that they might type that after a single click on the Language bar (or to use a shortcut - which can even be made as custom).[/QUOTE]

I am aware of the language bar. It's very handy to easily switch between character sets. What I was trying to accomplish, was a more temporary/emergency solution to the issue. Perhaps you were using a PC that didn't have the language bar installed and perhaps you did not have user rights to do so. Maybe you are learning an unsupported language, (maybe a constructed language) or you might want to write some phonetic Latin (if it's not supported) for educational reasons.

The idea could be integrated with language community forum fields for example, but the only reason actually made it was not so serious. I just usually get an idea into my head and like to see how it turns out. I quite like how modern mobile phone UIs handle internationalisation and wanted to see if I could replicate/prototype it in the web browser.

Thanks for you interest ?
Copy linkTweet thisAlerts:
@KorNov 03.2010 —  Maybe you are learning an unsupported language, (maybe a constructed language) or you might want to write some phonetic Latin (if it's not supported) for educational reasons.[/QUOTE]
OK. In response - I have had lately added something (maybe you have not seen it, as it was a later thought. Again:

"Don't mention that if I want to use that character I was told you ("î") and I work on a computer which has no Romanian language installed, I now how to use the Keystroke ASCII combination: ALT+a numbers combination (right side NumPad numbars), thus for "î" i know that I have to keep pressing the ALT key while I type on NumPad: 0238. When I release the ALT, my special character appears."

So, maybe you may focus on [I]this[/I] capturing keystrokes possibility?
Copy linkTweet thisAlerts:
@KorNov 03.2010 — Or: what about some buttons visible on the document. If your aim is to use form's elements like a text field or a textarea. Could be something like in the editor if this forum: when pressing a button, you can emulate a BOLD or ITALIC. This method is not so intricate, and it can be used to insert special characters. Except that you should have in the backstage a complete "dictionary". As I said, in Romanian language bar on, when I press [ I obtain î. You may simply capture the keys and, according to a switch button (on/off) you may replace the typed character with it's corresponded in that dictionary. I'll think about that, if I have some time... ?
Copy linkTweet thisAlerts:
@lekeauthorNov 04.2010 — Or: what about some buttons visible on the document. If your aim is to use form's elements like a text field or a textarea. Could be something like in the editor if this forum: when pressing a button, you can emulate a BOLD or ITALIC. This method is not so intricate, and it can be used to insert special characters. Except that you should have in the backstage a complete "dictionary". As I said, in Romanian language bar on, when I press [ I obtain î. You may simply capture the keys and, according to a switch button (on/off) you may replace the typed character with it's corresponded in that dictionary. I'll think about that, if I have some time... ?[/QUOTE]Yeah, this is a pretty good idea. It's a little like changing the language on the touch screen phones. If there are more than 2 characters mapped to one key though, it could get a bit tricky to implement, but I guess it would work really well on some languages.
Copy linkTweet thisAlerts:
@007JulienNov 04.2010 — Originally Posted by [B]Kor[/B]:

I don't have ALTGR key. It is not a standard key.[/QUOTE]

You are right ! It appears only on some keyboards, such as : US international, Scandinavian and Estonian, Croatian, Slovenian, Bosnian and Serbian (Latin), Latvian, Macedonian, German, French and Italian !

See [URL=]http://en.wikipedia.org/wiki/AltGr_key[/URL]...
Copy linkTweet thisAlerts:
@KorNov 04.2010 — You are right ! It appears only on some keyboards, such as : US international, Scandinavian and Estonian, Croatian, Slovenian, Bosnian and Serbian (Latin), Latvian, Macedonian, German, French and Italian !

See [URL=]http://en.wikipedia.org/wiki/AltGr_key[/URL]...[/QUOTE]

There are many more, Romanian (my native language) included. The problem is that the common users, at least in my country, do not bother themselves to buy those special keyboards, they prefer the classical ones, as they might have used with them, or simply because they are cheaper, or God knows for which other reasons. In the last year I have never seen a special Romanian keyboard anywhere, and I have visited tens and tens of clients ?
×

Success!

Help @leke spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.9,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...