iOS 8 Jquery Submit Button Focus Bug

Published by John on November 26, 2014 Under Javascript

Recently, a client reported that iPhone 6 users were reporting errors when submitting a form on their site.

After a bit of testing, I determined that it wasn’t just impacting users with a new iPhone, but it was affecting anyone running the latest version of iOS, iOS8.

The form looked something like the below:

<input type='submit' id='some_submit_button' value='Do Something' />

<script type='text/javascript'>

function on_do_something(){

     jQuery('#some_submit_button').focus();
}

</script>

At some point, focus() was called on the submit button and after that, it wasn’t possible for the iPhone user to use the button to submit the form. Instead, they would just see a blue blinking carrot(cursor,) like it was a text input, except no keyboard would appear.

A jQuery Bug, iOS Safari Bug, or Improper use of the Focus() function?

I believe this to be a Safari iOS bug or a jQuery bug, but it is a bit weird and doesn’t always seem to be repeatable. For now, I have just removed the call to focus() and the form works again.

Older versions of iOS, specifically iOS7, do not appear to be affected by this. I have tested it using jQuery v1.11.1 and jQuery v1.11.0.

An Example

The below example should provide a working example if you are on an iphone. The first time you click the button, the submit button gets focused and then you should see a javascript alert box that says ‘Works Once on iPhone.” After that, the button stops working and you see the blinking carrot instead of the alert box when you click on it.

No Comments |