Capture "done" button click in iPhone's virtual keyboard with JavaScript

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:

1. 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())
2. 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");
    } 
})