Need to identify the 'Done' button click in iOS edit keyboard using javascript

Question

From the image, is it possible to identify the iOS 'Done' button click event using javascript/jQuery? The iOS keyboard click events can identify using 'onkeypress' function for the text-area.

Answer 1

If that field is part of the form, Done will trigger "onsubmit" event of the form.

One approach is to set a timeout, which occurs on every form element's onblur (which is dispatched) and is cleared on every element's onfocus.

Brief example in jQuery as an explanation:

var blurOccurred;

$("input")
.on("blur", function(evt) {
  blurOccurred = window.setTimeout(function() {
    alert('Done button clicked');
  }, 10);
})
.on("focus", function(evt) {
  window.clearTimeout(blurOccurred);
});

By doing this, clicking "done" is detected with 10ms delay. And if it's just navigating to prev / next form field, whole timeout won't be executed.

I'll hope this get you started.

Edit: on iOS7 there is event.relatedTarget property, which is null when "done" is clicked - otherwise it's the input element where the focus is set on. Also this can be used for detecting whether done is clicked (or keyboard is closed).