HTML5 - Android - get key pressed - javascript

I am running Android 4.4.2 and it does not seem to fire the 'keypress' event.
Just some basic code I have now for testing is purposes:
$('<input>')
.on('keyup', function (e) {
e.preventDefault();
console.log(e.which);
})
.on('keypress', function (e) {
e.preventDefault();
console.log(e.which); // never fired
})
.on('keyup', function () {
console.log(e.which);
});
Yet the 'keyup' and 'keydown' event does not give an accurate code for the actual key pressed.
Is there a method (either JavaScript or jQuery) which I can use to get the actual key pressed in Android?
Thanks.

I think it's because of the spell check because the events only fire after a space or enter on android. Maybe find away to turn off spell check or scan the text field manually by focusing on a hidden text box maybe? I'm working on it when I wake up tomorrow.

Related

Keyup works while keypress doesn't Vanilla JS

I'm kinda re-learning JS and try to make modal windows in vanilla JS. So, my task is to make Escape button work and close modal on hitting it. I found out that when I put 'keypress' event on document, it fails to work, while 'keyup' works okay. I couldn't find exact info on why it is so. I used to use e.KeyCode but found out it is deprecated. So I mainly have 2 questions I couldn't find direct answers to:
why keycode doesn't work?
what is the best way to handle keyboard events in 2021?
Here is the code. Console.log doesn't work. If I change keypress to keyup, everything works.
document.addEventListener('keypress', function (e) {
console.log('Event fired');
if (e.key === "Escape" && !modal.classList.contains('hidden')) {
closeModal();
}
})
Thanks in advance.
Best regards,
Vadim
Like you said "keyCode" is deprecated but it still works (see example below).
The best way in your case would be to use keyup and e.key.
Your code works as expected (with any other key), but the keypress event is never fired for Escape. So you can only use keydown and keyup.
document.addEventListener('keypress', function(e) {
console.log('keypress fired; ', e.key);
})
document.addEventListener('keyup', function(e) {
console.log('keyup fired; ', e.key);
if(e.keyCode == '27') alert('Escape');
})

jQuery: keyup event for mobile device

I'm having a few issues getting a keyup event to fire on my iPhone, my code is as follows:
var passwordArray = ["word", "test", "hello", "another", "here"];
var test = document.getElementById('enter-password');
test.addEventListener('keyup', function(e) {
if (jQuery.inArray(this.value, passwordArray) != -1) {
alert("THIS IS WORKING");
} else {}
});
The idea being that as the user is typing into the #enter-password field, as and when they've matched a word in the passwordArray the alert will fire. This works on desktop, e.g. once you've entered word the function will fire straight away as soon as you've typed the d. Is there anyway to get this to work for mobile too?
You can add input event. It is an event that triggers whenever the input changes. Input works both on desktop as well as mobile phones
test.on('keyup input', function(){
//code
});
You can check this answer for more details on jQuery Input Event
There are three events you can use (but you have to be careful on how you "combine" them):
keyup : it works on devices with a keyboard, it's triggered when you release a key (any key, even keys that don't show anything on the screen, like ALT or CTRL);
touchend: it works on touchscreen devices, it's triggered when you remove your finger/pen from the display;
input: it's triggered when you press a key "and the input changes" (if you press keys like ALT or CTRL this event is not fired).
The input event works on keyboard devices and with touchscreen devices, it's important to point this out because in the accepted answer the example is correct but approximative:
test.on('keyup input', function(){
}
On keyboard based devices, this function is called twice because both the events keyup and input will be fired.
The correct answer should be:
test.on('keyup touchend', function(){
}
(the function is called on keyup for desktops/laptops OR on touchend for mobiles)
or you can just simply use
test.on('input', function(){
}
but remember that the input event will not be triggered by all keys (CTRL, ALT & co. will not fire the event).
The touchend event is fired when a touch point is removed from the device.
https://developer.mozilla.org/en-US/docs/Web/Events/touchend
You can pass keyup and touchend events into the .on() jQuery method (instead of the keyup() method) to trigger your code on both of these events.
test.on('keyup touchend', function(){
//code
});
You should add a input event. It works on both mobile and computer devices.

iOS 9 - keyup event not firing

Is anybody else having problems with the keyup event in iOS 9 not firing?
Just a simple test bed replicates the issue for me.
<input id="txtInput" />
Vanilla JS:
document.getElementById('txtInput').onkeyup = function () {
console.log('keyup triggered');
}
jQuery:
$('#txtInput').on('keyup', function () {
console.log('keyup triggered');
});
Neither fire...
I suggest using the keypress event on browsers with touch screens. I know that you can't really detect touch screen screens, though, so it leaves you with a few options that your situation will likely dictate.
Attach both events keyup and keypress. This would likely be dependent on how much processing is going on and if you are getting double-fires in some browsers.
Attempt to determine whether the browser is a touch screen (like using Modernizr), and then attach a fallback handler like change.
Either way, you end up with two event listeners.
$('#yourid').bind('keypress', function(e) {
// This will work
});
It's not pretty, but a work around is to bind to keydown to capture which key has been pressed, and input if you want to obtain the value, including the key typed:
(function () {
var keyCode;
$('#txtInput')
.on('keydown', function (e) {
// value not updated yet
keyCode = e.keyCode;
// Enter key does not trigger 'input' events; manually trigger it
if (e.keyCode === 13) $(this).trigger('input');
})
.on('input', function (e) {
console.log(keyCode, this.value);
});
}());
If you type 'a' the following occurs:
keydown fires.
e.keyCode is set to the ASCII value of the key pressed.
this.value is '' (i.e. the same before 'a' has been typed).
input fires.
e.keyCode is undefined.
this.value is 'a'.
You can also manually trigger an input event if the enter (13) key is pressed; input isn't fired by this key by default.

Detect Hide Keyboard Button on Ipad Iphone in Javascript

I am trying to intercept "Hide keyboard button" specific for Ipad in Javascript. I searched everywhere but could not find correct keycode for that.
I pressed any keys and I get a keycode map (for characters, but also for enter, space and delete..).
This is an example of what I want to accomplish
$( "#mydiv" ).on( "keydown", function( event ) {
if (event.which == xx){
//do something
}
}
where xx is my keycode on 'hide keyboard button'. No method is called to the delegate when the button is pressed nor a KeyCode.
I took a look at detect iPad keyboard Hiding button, but I get a solution on a different level (with Xcode), but I need a solution with Javascript.
Hope someone could help.
I found a workaroud for iPad IOS7. I will test on IOS8 to make sure it works. So basically I create a listener on every FOCUSOUT event (for all my texts) and I call my function.
It fires when you have your keyboard open and when you close your "keyboard". It doesn't fire when you select another text field or button, because it targets on null. If you use in combination with keydown, you can save multiple value and call your submit function only when you release your keyboard.
It works for my specific project.
document.addEventListener('focusout', function(e) {
if (e.relatedTarget === null) {
alert("close keyboard without click on something else");
callYourFunction();
}
});
p.s
I'm pretty new here in SO, so I don't know if I can reply myself or I should edit my question or make a comment.

How to find what caused onChange event for select box in IE - keyboard or mouse?

Is there some way to find out what caused the onChange event on select box in Internet Explorer (>= IE8) - keyboard or mouse?
I have a code which doing something when user selecting a value, and this code works great in Firefox and Chrome but not in IE (no surprise, huh). In IE it works fine only if user uses mouse but not a keyboard, because then it fires a onchange event on every keypress (not on Enter as normal browsers).
So, to fix this behavior I need to know if event is fired using a keyboard and then I will filter it.
Update:
Ok, after playing a bit I found a good solution. Posting it here in case someone will find it useful. Solution below using jQuery but it can be done in pure Javascript too.
This is a code which caused a problem:
$("#mySelectBox").change(function () {
// Do something
});
And this is my solution. It's probably not perfect, but it works in my case. And event handlers could be chained in jQuery, of course. The code below stores initial value of the select and uses it to avoid doing something on initial mouse click - when user expands a select box. Also it filters all keypresses except Enter.
function doSomething(el) {
if (el.data["valueOnFocused"] !== el.val()) {
// Do something
}
}
$("#mySelectBox").focusin(function () {
$(this).data["valueOnFocused"] = $(this).val();
});
$("#mySelectBox").keyup(function (e) {
if (e.which === 13)
{
doSomething($(this));
}
});
$("#mySelectBox").click(function () {
doSomething($(this));
});
Basically the onchange event is supposed to be fired when the user makes a selection then leaves the input (be it select, textbox, radio button, whatever). Since this isn't working in IE, you could try using onblur instead, to detect when the user actually leaves the box. At that point you could read which item is selected and act accordingly. This is more of a workaround, but might do what you need.
Edit: another option would be to detect the pressing of the Enter key, like so:
if(e && e.which){ // NN4 specific code
e = e
characterCode = e.which
}
else {
e = event
characterCode = e.keyCode // IE specific code
}
The characterCode variable now has the "code" of which button was pressed. If it was the enter key, that code will be 13. You could listen for this.

Categories

Resources