I'm trying to get a cross-browser way to listen to keyCode
of user's keyDown
.
For mobile browsers, I have to trigger the virtual keyboard, so I use an input hidden by css, triggered with a click
event. This works well except that when I try to listen to keycode, on fennec (mobile Firefox), I've got strange behavior.
Here is the function I use to listen to keycode
.
document.querySelectorAll('input')[0].addEventListener('keydown', handler);
function handler(e) {
e.preventDefault();
var k = (e.which) ? e.which : e.keyCode;
document.getElementById('log').innerHTML = k;
this.style.backgroundColor = "#FFAAFF";
}
<input type="text" />
<span id="log"></span>
In Firefox for android (v34 to v37), it won't fire until the user
typed return⏎.
Actually, I found that if the value of the input is not
empty, it works well, at least on load. So I thought of a
workaround like this one : if(this.value=='')this.value='*';
Seems to work but if you spam it, the backspace
⌫ isn't blocked, so when the input is cleared, the bug
comes back : the workaround doesn't fire either.
+This a ugly workaround, which I'm sure will create other bugs in other browsers.
document.querySelectorAll('input')[0].addEventListener('keydown', handler);
function handler(e) {
if(this.value=='')this.value='*';
e.preventDefault();
var k = (e.which) ? e.which : e.keyCode;
document.getElementById('log').innerHTML = k;
this.style.backgroundColor = "#FFAAFF";
}
<input type="text" value="*"/>
<span id="log"></span>
In B2G (Firefox Os 1.3 on device or 2.0 emulated) the behavior is
even odder:
the function only reads keyCode
for backspace⌫(keycode 8
) or return⏎(keyCode
13
) keys. Any other key will return 0
.
So, my question is, do you know a better cross browser way to listen to keyCode
, a one working in all major browsers, desktop or mobile, and on fennec?
Ps: even if I write my app in vanilla-js, it's ok for me to see solutions with any library.
Keycode 13 is the Enter key.
KeyCode was deprecated because in practice it was “inconsistent across platforms and even the same implementation on different operating systems or using different localizations.” The new recommendation is to use key or code .
Note: The charCode property is deprecated. Use the key property instead. The charCode property returns the Unicode character code of the key that triggered the onkeypress event.
There isn't a perfect solution to listen the KeyCode across browsers and OS... Simply because javascript uses the same Key Codes that are reported by the Operating System where it runs.
You will be better off using the input
event instead of keyDown
According to this site the input
event occurs when the text content of an element is changed through the user interface, which is what you want, because in some mobile browsers/OS events don't fire until the user enters the input and the change
event fires.
$(document).ready(function () {
var inputEvent = 'oninput' in window ? 'input' : 'keyup';
$('#listen').on(inputEvent, function (event) {
$('#show').val($('#show').val() + '\n' + event.type);
console.log('--- input event ----');
for (var v in event.originalEvent) {
if (event.hasOwnProperty(v)) {
console.log(v + ' |---> ' + event[v]);
}
}
})
//just added to see what Silk listens for on the keyup event
$('#listen').on('keyup', function (event) {
$('#show').val($('#show').val() + '\n' + event.type + ' | which --> ' + event.which);
console.log('--- keyup event ----');
for (var v in event.originalEvent) {
if (event.hasOwnProperty(v)) {
console.log(v + ' |-.-> ' + event[v]);
}
}
})
});
input {
font-size: 22px
}
input, textarea {
width:300px;
}
textarea {
height:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
<input type='text' id="listen" />
<br/>
<br/>
<textarea type='text' id="show"></textarea>
</div>
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