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.
Related
Before I get rushed telling me to search first.. I've tried. Without any luck and after trying multiple solutions.
This link looked as though it should work, but it does not.
Stackoverflow link to preventing backspace
I tried using that script. I also tried catching the key myself (using keyup, keydown, keypress) and returning false, preventDefault, stopPropagation, etc. Nothing seems to work.
Catching the key event does prevent it from navigating back when any other element is focused or simply the body being focused. This helps, but does not solve my issue.
I found another solution using pure javascript without jquery and it has the same effect (still navigated when select is focused and open).
If a user selects an option and then presses backspace it does not navigate back, but for some reason if the SELECT is still open, it directs them away from the page.
One solution I have considered is using a body onunload event to prompt the user if they want to leave the page, but then I have to deal with that when they submit to form or click a link on the page which is not an ideal solution.
The current code(of many different attempts):
$(document).on('keyup keydown keypress', function(e){
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if(key == 8){
console.log('backspace');
e.preventDefault();
e.stopPropagation();
return false;
} else {
console.log('keypress');
}
});
Any help is genuinely appreciated. Thanks.
[Edit] I am using Google Chrome Version 48.0.2564.116 m
I had a similar problem; i'm not sure why, but select elements weren't being captured by the $(document) selector.
try ('*').on('keydown', function(e){...});, this worked for me.
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.
I have a JQuery scroller on a page where each item is a div with an id. each div has a link to the next div in the scroller (all on the same page)
$('a.panel').click(function () {
};
I have a click event to all links with the 'panel' class where I check which links was clicked and then do some ajax processing accordingly:
if($(this).attr('href')=="#item2")
{
//do some processsing
}
and once the processing is done I use the scrollTo JQuery method to scroll to the next div
I need to have it that the user can press the enter key instead of clicking on the link.
Now the problem is:
a. I have several links on the same page that all need to have this behaviour.
b. I need to differentiate which link triggered the click event and do some server-side processing.
Is this possible at all?
I appreciate the quick and helpful responses!!Thanks a million for the help!
Focus + enter will trigger the click event, but only if the anchor has an href attribute (at least in some browsers, like latest Firefox). Works:
$('<a />').attr('href', '#anythingWillDo').on('click', function () {
alert('Has href so can be triggered via keyboard.');
// suppress hash update if desired
return false;
}).text('Works').appendTo('body');
Doesn't work (browser probably thinks there's no action to take):
$('<a />').on('click', function () {
alert('No href so can\'t be triggered via keyboard.');
}).text('Doesn\'t work').appendTo('body');
You can trigger() the click event of whichever element you want when the enter key is pressed. Example:
$(document).keypress(function(e) {
if ((e.keyCode || e.which) == 13) {
// Enter key pressed
$('a').trigger('click');
}
});
$('a').click(function(e) {
e.preventDefault();
// Link clicked
});
Demo: http://jsfiddle.net/eHXwz/1/
You'll just have to figure out which specific element to trigger the click on, but that depends on how/what you are doing. I will say that I don't really recommend this, but I will give you the benefit of the doubt.
A better option, in my opinion, would be to focus() the link that should be clicked instead, and let the user optionally press enter, which will fire the click event anyways.
I would like to focus on the link, but am unfamiliar exactly how to do this, can you explain?
Just use $(element).focus(). But once again, you'll have to be more specific, and have a way to determine which element should receive focus, and when. Of course the user, may take an action that will cause the link to lose focus, like clicking somewhere else. I have no idea what your app does or acts like though, so just do what you think is best, but remember that users already expect a certain kind of behavior from their browsers and will likely not realize they need to press "enter" unless you tell them to.
If you do choose to use the "press enter" method instead of focusing the link, you'll likely want to bind() and unbind() the keypress function too, so it doesn't get called when you don't need it.
http://api.jquery.com/focus/
http://api.jquery.com/bind/
http://api.jquery.com/unbind/
Related:
Submitting a form on 'Enter' with jQuery?
jQuery Event Keypress: Which key was pressed?
Use e.target or this keyword to determine which link triggered the event.
$('a.panel').click(function (e) {
//e.target or this will give you the element which triggered this event.
};
$('a.panel').live('keyup', function (evt) {
var e = evt || event;
var code = e.keyCode || e.which;
if (code === 13) { // 13 is the js key code for Enter
$(e.target).trigger('click');
}
});
This will detect a key up event on any a.panel and if it was the enter key will then trigger the click event for the panel element that was focused.
I'm wondering if there's a way to capture the iPhone's virtual keyboard's done button event, using JavaScript?
Basically, I just want to be able to call a JS function when the user clicks done.
I was unable to track the 'done' button being clicked. It didn't register any clicks or keypresses. I had to addEventListeners for change, focusout and blur using jquery (because the project already was using jquery).
You need to do some kind of this:
$('someElem').focusout(function(e) {
alert("Done key Pressed!!!!")
});
It worked for me, hope it will help you as well.
After searching and trying this solution
basically is say:
document.addEventListener('focusout', e => {});
tested on IPhone 6s
This question is kinda old, but I've found a hacky way recently to make this working.
The problem with the 'blur', 'focusout' events is that they fire even if user just tapped outside the input/textarea, and did not press the 'Done' button, in my case, UI should behave differently depending on what exactly have happened.
So to implement it, I've done the next thing:
After showing the keyboard (the input received the focus), add click handler on the window via the addEventListener function. When user clicks on the window, remember the timestamp of the click in the variable (let's call it lastClick = Date.now())
In the blur event handler, set a timeout for 10-20 ms to allow other events happening. Then, after the timeout, check if the blur event happened in a time difference lower for example than 50-100 ms than the lastClick (basically Date.now() - lastClick < 50). If yes, then consider it as a 'Done' button click and do corresponding logic. Otherwise, this is a regular 'blur' event.
The key here is that tapping on keyboard controls (including Done button) does not trigger the click event on the window. And the only other way to make keyboard hide is basically tap on other element of the page and make the textarea lose focus. So by checking when the event happened, we can estimate whether that's a done button click or just blur event.
The answer by oron tech using an event listener is the only one that works cross platform.
document.getElementById("myID").addEventListener("focusout", blurFunction);
function blurFunction() { // Do whatever you want, such as run another function
const myValue = document.getElementById("myID").value;
myOtherfunction(myValue);
}
"Change" event works fine
document.querySelector('your-input').addEventListener('change',e=>
console.log('Done button was clicked')
);
attach a blur event to the text box in question. The done fire will fire this event.
The done key is the same as the enter key. So you can listen to a keypress event. I'm writing this using jQuery and i use it in coffee script so I'm trying to convert it back to js in my head. Sorry if there is an error.
$('someElem').bind("keypress", function(e){
// enter key code is 13
if(e.which === 13){
console.log("user pressed done");
}
})
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.'