Develop Reference

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.

Alert box doesn't show even after return false

See code:
area.onkeydown = function(e){
e = e || window.event;
if(e.shiftKey && e.keyCode === 32){
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
// no alert here
return false;
}
};
Here, the code works, and on pressing Shift + Space, the space doesn't get inserted. However, as soon I insert an alert, it doesn't work, i.e. the space gets inserted and the alert box also doesn't show.
area.onkeydown = function(e){
e = e || window.event;
if(e.shiftKey && e.keyCode === 32){
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
alert("typed"); // this alert doesn't show
return false; // and space also gets insrted
}
};
FIDDLE
What am I missing?
UPDATE:
Using onkeyup would show the alert, but a space gets inserted.
Using onkeypress would not insert the space, but the alert stays as long as the keys remain pressed.
So, I guess there is no way for me to get this working. And as Teemu puts it:
At your fiddle the snippet works with or without alert() without printing the space in IE11 (Win7). FF loses the preventDefault() behavior, though I can see the alert. In Chrome35 the alert only flashes on the screen and the space is printed. (If the flash is fast enough, your case?) IE uses an OS window to show an alert, other browsers have their own implementation, which seems to mess up the event handling.
UPDATE: I'm voting to close this question as off-topic because the problem can no longer be reproduced, the way it was described, in that fiddle in the latest Chrome version. Pressing Shift+Space now shows the alert box but does NOT insert any space.

i've change your keydown to keyup
See this
area.onkeyup = function(e){}

Try with onkeypress instead of onkeydown

Using Keyup instead of keydown reason is as below:
area.onkeyup = function(e){
Demo
Keydown:
The keydown event is sent to an element when the user first presses a
key on the keyboard. It can be attached to any element, but the event
is only sent to the element that has the focus. Focusable elements can
vary between browsers, but form elements can always get focus so are
reasonable candidates for this event type.
Keyup:
The keyup event is sent to an element when the user releases a key on
the keyboard. It can be attached to any element, but the event is only
sent to the element that has the focus. Focusable elements can vary
between browsers, but form elements can always get focus so are
reasonable candidates for this event type.

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.

Does keypress() only fire when a textfield is focused in Firefox?

jQuery(document).ready(function ($) {
$('body').keypress(function (e) {
alert(e.which);
});
});
This will pop up an alert when a key is pressed in Chrome but not in Firefox. However, if I create a text field and focus it, then press a key, an alert will pop up in Firefox. (Even though $('body') is still the jQuery object.)
How can I get the event to fire in Firefox even when a textfield is not focused? Is there a workaround? I will be firing an event when the Enter key is pressed anywhere on the page.
Thanks guys

If you have no elements on the page, the browser might assume that the <body> element (or any of its descendants) doesn't have focus. Try binding your event to the document:
jQuery(document).ready(function ($) {
$(document).keypress(function (e) {
alert(e.which);
});
});

#DarthJDG is right, but you should still set focus on the window if you want to listen for keypresses immidiately after page load. in some cases browsers will leave focus on the address bar. so add:
$(window).focus();
after setting up the keypress handler

Javascript Event Key Property Mixup in FF

This is a weird bug, indeed. In Chrome (6.0.472.62, latest) and IE8 (at least), this behaves correctly, but in FF (3.6.9, latest) both the click event and enter event register, making it hard to discern between the behavior.
Check out this code: http://jsfiddle.net/QmkwY/1/, click on the search box in the "results" and just hit enter. The results underneath should register click event: 1 enter event: 13, which is clearly incorrect.
I have different things happening for click events and enter events on my page, so when an enter event registers as a click event, you can imagine the frustration!
Anyone have a clever solution?

In clickEvent, you can check e.pageX and e.pageY to be sure they have values to see if it was actually clicked.
if (e.pageX == 0 && e.pageY == 0) {
return;
}
But that will also affect "clicking" the button via spacebar. If that's not ok, you'll need to bind spacebar to the button separately.
$('#button').keyup(function (e) {
if (e.which == 32) {
// do something
}
}

You are binding to event to '#button' it should be '#search'

Well, when your button is hidden I'm only getting the enter event, and not the click event in Chrome. However, when I show the button I get both. I also inserted a button between your button and the input, and that causes it to not fire the click event.
I believe this is intended as a shortcut to submit forms, you could do workarounds as others have posted, but I don't think this is a real 'problem.'