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

Question

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.

Answer 1

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).

Answer 2

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.

Answer 3

After searching and trying this solution basically is say:

 document.addEventListener('focusout', e => {});

tested on IPhone 6s

Answer 4

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.

Answer 5

At the risk of my response not being an answer to the question as asked... I'd still like to pose an alternate way of thinking here. We may be misunderstanding the intended purpose of "done".

Let's say that our input is a search input...

I don't think that "done" is intended to be the "Do the Search" / "Go" action.

I understand why the confusion is there, especially when not providing a suitable inputmode to the search field.

Image: Keyboard WITHOUT inputmode

Adding inputmode="search" to your input will give your keypad a very prominent [ GO ] button that we can use to execute a search (in this example).

Image: Keyboard WITH inputmode

I feel that with the presence of the [ GO ] button, enter keyup detection , and possibly a blur event for taps outside the keyboard, the behavior of "Done" as "collapse keyboard" makes more sense and reduces (possibly eliminates) the need to think of that as the action button for our input. In effect "done" now becomes the close button for the native keypad (divorced from the input), not the action button, which I believe is as intended.

Answer 6

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

Answer 7

When you press the Done button, it essentially just changes the height of the screen:

  const prevHeight = useRef(window.innerHeight);

  useEffect(() => {
    function checkHeight() {
      const currentHeight = window.innerHeight;

      if (currentHeight > prevHeight.current) {
        onBlur();
      }

      prevHeight.current = currentHeight;

      requestAnimationFrame(checkHeight);
    }

    const animationFrameId = requestAnimationFrame(checkHeight);

    return () => {
      cancelAnimationFrame(animationFrameId);
    };
  }, []);

Answer 8

attach a blur event to the text box in question. The done fire will fire this event.

Answer 9

"Change" event works fine

document.querySelector('your-input').addEventListener('change',e=>
    console.log('Done button was clicked')
);

Answer 10

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