Entry
(How) Can I convert the key pressed (for instance to upper case)?
(How) Can I convert the key pressed (for instance to upper case)?
How can i convert the Turkish letter(ý,Ý,Ö,ö,Ç,ç,Þ,þ,Ð,ð) into English (i,I,O,o,C,c,S,s,G,g) when I'
May 5th, 2005 16:36
Fred Drake, Martin Honnen, Pon Bakyaraj, Adam Finster, Harun Kýzýltuð,
onkeypress (but NOT onkeydown or onkeyup) IE4+ (at least on Win) allows
you to change the
event.keyCode
property.
With Mozilla based browsers like Netscape 6/7 you cannot change the
keyCode or charCode properties of the event object, at least not with
unprivileged scripts like those inside HTML pages loaded from a HTTP server.
However Mozilla for <input> text controls implements an interface to
manipulate the text selection in the control. Thus with Mozilla you can
cancel a key and insert some replacement string at the current caret
position.
The following example HTML page contains a function changeKey which
allows you to change a key onkeypress with Mozilla and IE4+. It has been
tested to work with Netscape 7, Mozilla 1.4a and IE6, all on Win. I
think it should work with <input> controls with Netscape 6.1+ on all
platforms and with <input> and <textarea> controls with IE4+/Win.
Since Mozilla 1.3 the interface to manipulate the selection works also
for <textarea> elements so the code below should also work with
<textarea> elements with Mozilla 1.3+. Be warned however that I haven't
tested this and that the interface is buggily implemented in Mozilla
releases between 1.0 and 1.3 so that the changeKey function might not
work as intended with <textarea> elements with these releases.
The code should cause no problems in other browsers, I have tested that
it causes no errors in Netscape 4 and Opera 7 where you can cancel keys
but not replace them.
<html>
<head>
<title>Changing the key entered into an input element with IE4+ and
Mozilla</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
/*
the third argument to changeKey should be a function
function exampleKeyChecker (keyCode, key)
which returns an object
{ cancelKey: boolean, replaceKey: boolean, newKeyCode: number, newKey:
string }
Not all properties need to be present, if cancelKey is set to true the
other properties are not needed.
If replaceKey is set to true then at least newKeyCode needs to be set.
*/
function changeKey (textControl, evt, keyChecker) {
var keyCode = evt.keyCode ? evt.keyCode :
evt.charCode ? evt.charCode :
evt.which ? evt.which : void 0;
var key;
if (keyCode) {
key = String.fromCharCode(keyCode);
}
var keyCheck = keyChecker(keyCode, key);
if (keyCode && window.event && !window.opera) {
if (keyCheck.cancelKey) {
return false;
}
else if (keyCheck.replaceKey) {
window.event.keyCode = keyCheck.newKeyCode;
if (window.event.preventDefault) {
window.event.preventDefault();
}
return true;
}
else {
return true;
}
}
else if (typeof textControl.setSelectionRange != 'undefined') {
if (keyCheck.cancelKey) {
if (evt.preventDefault) {
evt.preventDefault();
}
return false;
}
else if (keyCheck.replaceKey) {
// cancel the key event and insert the newKey for the current
// selection
if (evt.preventDefault) {
evt.preventDefault();
}
var oldSelectionStart = textControl.selectionStart;
var oldSelectionEnd = textControl.selectionEnd;
var selectedText = textControl.value.substring(oldSelectionStart,
oldSelectionEnd);
var newText = typeof keyCheck.newKey != 'undefined'
? keyCheck.newKey
: String.fromCharCode(keyCheck.newKeyCode);
textControl.value =
textControl.value.substring(0, oldSelectionStart) +
newText +
textControl.value.substring(oldSelectionEnd);
textControl.setSelectionRange(oldSelectionStart + newText.length,
oldSelectionStart + newText.length);
return false;
}
else {
return true;
}
}
else if (keyCheck.cancelKey) {
if (evt.preventDefault) {
evt.preventDefault();
}
return false;
}
else {
return true;
}
}
</script>
Here's how this can be used:
<script type="text/javascript">
function lettersToUpperCase (keyCode, key) {
var newKey = key.toUpperCase();
if (newKey != key) {
return { replaceKey: true,
newKeyCode: newKey.charCodeAt(),
newKey: newKey };
}
else {
return { cancelKey: false };
}
}
function digitsToX (keyCode, key) {
if ("0123456789".indexOf(key) != -1) {
return { replaceKey: true,
newKeyCode: "X".charCodeAt(),
newKey: "X" };
}
else {
return { cancelKey: false };
}
}
function umlautsToASCII (keyCode, key) {
var asciiUmlauts = {
"ä": "ae",
"ö": "oe",
"ü": "ue",
"�": "Ae",
"�": "Oe",
"�": "Ue"
};
if ("äöü���".indexOf(key) != -1) {
return { replaceKey: true,
newKeyCode: keyCode,
newKey: asciiUmlauts[key] };
}
else {
return { cancelKey: false };
}
}
function cancelDigits (keyCode, key) {
return { cancelKey: "0123456789".indexOf(key) != -1 };
}
</script>
</head>
<body>
<form name="formName">
<p>
<label>
Letters should be converted to upper case:
<input type="text"
onkeypress="return changeKey(this, event, lettersToUpperCase);">
</label>
</p>
<p>
<label>
Digits should be cancelled:
<input type="text"
onkeypress="return changeKey(this, event, cancelDigits);">
</label>
</p>
<p>
<label>
Digits should be replaced with "X":
<input type="text"
onkeypress="return changeKey(this, event, digitsToX);">
</label>
</p>
<p>
<label>
German one letter umlauts should be replaced with two letter ASCII
sequence (only for Mozilla):
<input type="text"
onkeypress="return changeKey(this, event, umlautsToASCII);">
</label>
</p>
</form>
</body>
</html>
In case the above looks too complex here is the IE only solution:
<HTML>
<HEAD>
<SCRIPT>
function keyToUpperCase(field, evt) {
if (document.all) {
var c = event.keyCode;
var C = String.fromCharCode(c).toUpperCase().charCodeAt();
event.keyCode = C;
return true;
}
else
return true;
}
</script>
</head>
<BODY>
<FORM NAME="formName">
<INPUT TYPE="text" NAME="aField"
ONKEYPRESS="return keyToUpperCase(this, event)"
>
</form>
</body>
</html>
NN4 docs claim that with trusted script it is possible to change
event.which
to another key code. Changing the value of that property indeed works
but the letter displayed doesn't change. Here is the above code (that
is not succesfully working but maybe someone wants to play with it)
extended for NN4:
function keyToUpperCase(field, evt) {
if (document.all) {
var c = event.keyCode;
var C = String.fromCharCode(c).toUpperCase().charCodeAt();
event.keyCode = C;
return true;
}
else if (document.layers) {
var c = evt.which;
var C = String.fromCharCode(c).toUpperCase().charCodeAt();
netscape.security.PrivilegeManager.enablePrivilege
('UniversalBrowserWrite');
evt.which = C;
return true;
}
else
return true;
}
