We Keep Coding

How to handle keyboard "Done" button in iphone safari browser using JavaScript [duplicate]

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");
}
})

jQuery Keyboard shortcut plugin unbind does not work in my demo but does not show any errors

I am trying to use this jQuery Keyboard shortcuts plugin https://github.com/jeresig/jquery.hotkeys in my JavaScript app.
I am having an issue where the bind method which enables the event listener to start listening for my key presses works however the unBind method does not seem to be working.
Here is an example: http://jsfiddle.net/80k2uf3w/13/
// Enable our keyboard shortcut for the "number 1 key"
function bindOneKey(){
alert("keyboard Event listener is now listening for key number 1 to be pressed!");
jQuery(document).bind('keydown', '1',function (evt){
alert("keyboard key number 1 was pressed");
return false;
});
}
// Disable our keyboard shortcut for the "number 1 key"
function unBindOneKey(){
jQuery(document).unbind('keydown', '1');
alert("keyboard Event listener for key number 1 has been killed!");
}
// Demo buttons to enable/disable our Keyboard shortcut Event listeners
$(document).ready(function(){
$('#bindOne').bind('click', bindOneKey);
$('#unBindOne').bind('click', unBindOneKey);
}
HTML Buttons for Demo
<input type="button" id="bindOne" value="Bind 1 keyboard key" />
<input type="button" id="unBindOne" value="unBind 1 keyboard key" />
On that demo page after pressing the bind 1 button, you can then press the number 1 key on your keyboard and get an alert from the callback function.
After that if you press the unbind 1 button and then press the 1 key again, it still works instead of un-binding it!
Does anyone know what the problem could be?
This is just the most basic demo to show the functionality and the problem. My real app will basically enable the keyboard shortcuts when a Modal is opened and then disable/unbind them when the Modal is closed. That is why i need to get this working.
My other option is to find a new Keyboard shortcut library, there are about 50 of them it seems but I liked this one because it seems to be pretty lightweight and also built by a very well know JavaScript developer. So I am posting here to see if we can get this one working 100% first.
One thing to note is that on the GItHub page for the library it seems the test files are using a jQuery v1.4.x older version, perhaps that could be part of the issue but I am not sure as majority of the library works and also I get no console errors!
Thanks for any help

I found a similar question with someone else trying to do the same thing enable and disable the keyboard shortcuts as a Modal opens and closes using this library in this question jQuery Hotkeys - unbinding?
It seems there isn't any perfect solution so I will probably look at other libraries or maybe just manually code the key shortcuts I need with jQuery without a library. It might give me more control.

IE raises blur on focus in textbox

First of all, this is my first question here, sorry if it is not asked properly.
I have a bug in a web app we developed in the office. The app is nearly done but In IE < 9 it happens that a text-box which has focus and blur events attached with jQuery raises the blur event as soon as you click on it.
You can see this in this picture (just clicked in the text-box):
https://www.dropbox.com/s/yn10xfrfxsr38bq/screen.PNG
$('#divVolee [type="text"]')
has no focusin or focus events attached.
The URL to the application:
http://86.126.255.70:2213/Anoxa/
If you want you can enter using the "Demarrer" button.
I do not ask anybody to write code for me or anything like that, I just don't know after days of searching in the code and on the net what could cause that.
I tried focusin, focus, focusout, blur, attaching directly or using delegates, the same thing. As soon as I click in the input field it raises the blur / focusout event.
Thank you for your help.

I found it. I started to comment everything out until I found the culprit:
function resizeAccordion() {
var active = $('#divAccordion').accordion('option', 'active');
$('#divAccordion').accordion('destroy').accordion({ heightStyle: "fill", active: active });
}
var resizeId;
$(window).resize(function () {
clearTimeout(resizeId);
resizeId = setTimeout(resizeAccordion, 600);
});
This code was supposed to re-size and re arrange the accordion in the page if the user re-sized the browser. Somehow in IE<9 it got triggered without reason and this caused the blur event to be triggered.
After so many hours. Maybe it is may thinking or code that was wrong, but i still hate IE for it.

I cannot reproduce this bug (using IE8 mode under IE9). But a simple workaround could be: (even quite weird)
$('#divVolee [type="text"]').focus(function(){
//>>code for FOCUS here<<
$(this).blur(blurcallback);
});
function blurcallback()
{
//>>code for BLUR here<<
$(this).off('blur');
}

Browser detection - checkbox change events

I'm creating a form with some fancy interactivity which depends on the change event of radio buttons. As ie doesn't trigger this event until another element is focused I need to branch my code, but want to go down the feature detection rather than browser detection route.
Looking at a few resources (http://api.jquery.com/jQuery.support/, http://kangax.github.com/cft/) I can't find any implementation of detecting ie's buggy radio/checkbox change events.
Does anyone know how I might be able to detect it?

In my experience, click and keyup are the only event to trust in this case.
(function () {
$('#yourRadio').bind('click keyup', function () {
// check value with $(this).val()
});
}());

What's the difference of Click-to-focus and focus-by-javascript?

I met one troublesome web page whose structure is complicated. If one DIV is clicked by mouse, everything is OK. However, if it is focus-ed by javascript(i.e. divElement.focus). The layout turns to messy. This only happens in IE7/8.
So, is there any difference between click-to-focus and focus-by-javascript in IE?

Firing a Javascript focus event does not fire a click event. Without seeing the relevant code, I'm led to guess that some click handler is in place that is not being called in the case where you fire a focus event.
You might try, instead, firing a click:
var clickEvent;
if(document.createEvent) {
clickEvent = document.createEvent('click');
clickEvent.initMouseEvent('click');
divElement.dispatchEvent(clickEvent);
} else {
// Semi-pseudocode for IE, not tested, consult documentation if it fails
clickEvent = document.createEventObject();
divElement.fireEvent('onclick');
}
Or if you're into the jQuery thing:
$(divElement).click();
There's similar solutions for Prototype as well (search for Event.simulate).

The definition of the Focus action is to bring the input (keyboard or mouse) to a certain element, usually an input field. When an element gains focus, an OnFocus event is fired. When it loses focus, an OnBlur event is fired.
What you usually get by clicking is the OnClick event, which is not necessarily related to the above two.

This only happens in IE7/8.
Hmm, then I'm sure it's an IE related bug. Not surprising. If there is legitimate Javascript events involved, then they should fire uniformly across all browsers.