Menu
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.net/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.net/Qxd76/ (use http://jsfiddle.net/Qxd76/show to view the result on a smartphone).
370
It works on computers, but not on mobile..
The keydown event is fired when a key is pressed. Unlike the deprecated keypress event, the keydown event is fired for all keys, regardless of whether they produce a character value. The keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered.
keydown – fires when any key is pressed down, fires first, and always before the browser processes the key (e.g. inserting text, moving focus, etc). keypress – fires when a key that produces a character value is pressed down, fires after keydown , and before the browser processes the key.
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.
i 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);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
