Below code works perfect in Chrome, Firefox, on IPhone, and even in third-party browsers on Android. However, when run within the native browser key events for special characters like Å, Ä, and Ö on my Swedish keyboard are simply not triggered.
The example should only allow the user to enter a single character at a time. Works like a charm, unless I in android press keys like Å, Ä or Ö for which I can enter any number of characters.
Here's a jsFiddle for any who wish to try it out: /. If u don't have special keys like my Swedish ones printed on your keyboard, characters like é (hold E) should do the "trick".
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Key Event test</title>
</head>
<body>
<input type="text" id="a" name="test" />
<script>
document.getElementById("a").onkeypress = function(e) {
e = e || window.event;
var k = e.keyCode || e.which;
this.value = String.fromCharCode(k);
return false;
}
</script>
</body>
</html>
And no, keydown and keyup don't work either. Did I miss something, or is this a bug? It's horribly annoying when developing Swedish Apps in PhoneGap!
Thanks!
EDIT:
As Manor says in his answer, the input event can be used. Here's a fiddle which demonstrates the differences between the keypress, input, and change events: / (use to view the result on a smartphone).
Below code works perfect in Chrome, Firefox, on IPhone, and even in third-party browsers on Android. However, when run within the native browser key events for special characters like Å, Ä, and Ö on my Swedish keyboard are simply not triggered.
The example should only allow the user to enter a single character at a time. Works like a charm, unless I in android press keys like Å, Ä or Ö for which I can enter any number of characters.
Here's a jsFiddle for any who wish to try it out: http://jsfiddle/x7H6f/. If u don't have special keys like my Swedish ones printed on your keyboard, characters like é (hold E) should do the "trick".
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Key Event test</title>
</head>
<body>
<input type="text" id="a" name="test" />
<script>
document.getElementById("a").onkeypress = function(e) {
e = e || window.event;
var k = e.keyCode || e.which;
this.value = String.fromCharCode(k);
return false;
}
</script>
</body>
</html>
And no, keydown and keyup don't work either. Did I miss something, or is this a bug? It's horribly annoying when developing Swedish Apps in PhoneGap!
Thanks!
EDIT:
As Manor says in his answer, the input event can be used. Here's a fiddle which demonstrates the differences between the keypress, input, and change events: http://jsfiddle/Qxd76/ (use http://jsfiddle/Qxd76/show to view the result on a smartphone).
- Im experiencing the same thing, this is probably a bug in android? – rapadura Commented Jul 3, 2012 at 14:47
- I'm decently sure it's a bug in the native browser for android, which is what webviews are using. I haven't confirmed it, but I suspect it should be solved after version 4, as they've changed the browser to chrome after that? – Zut Commented Jul 19, 2012 at 18:08
-
@rapadura @Zut
inputevent doesn't returnkeyCodeorwhichorcharCode.. – Kosmetika Commented Jul 14, 2014 at 14:06
1 Answer
Reset to default 11i just spent allot of time about this problem. i'm develop to hebrew and all hebrew charters isn't firing event for me.
i found the solution and i'll give for it short explain before
when use all key events the browser search for the key you pressing for. cause some reason all charters in other language from english in android native browser is unknown and this is why isn't fire any event when you fill in input charter.
the solution is to search for event in the input and not on the key. for example if we have in text input .change() method is will be great for us.
i'm using in addEventListener() method and is working like a charm.
this is the code
var exmpleInput = document.getElementById('input-id');
if(exmpleInput) {
exmpleInput.addEventListener("input", function() {
exampleFunction(this)
}, false);
}