By Mac Mad Ill

2014-10-01 16:38:40 8 Comments

Prior to iOS8, using the Javascript .focus() method on an input element would appear to have no effect (the virtual keyboard would not display). After the latest iOS 8 release, running the .focus() method seemed to have no effect on page load but once a user touched anywhere on the screen the virtual keyboard would instantly appear and scroll the page to the element in focus. (This is also an issue when I use the HTML attribute "autofocus")

This change has caused issues with iOS8 users on my site. When a user attempts to click a button on my page the sudden scroll and keyboard appearance causes them to unintentionally click a button that was lower on the screen.

I am assuming this is a bug in iOS8 and was not intentional feature, my question is what is the most efficient solution to fixing this problem?

Do I have to check navigator.userAgent to see if the device is iOS8, every time I use the .focus() method?


@Ahmad Alfy 2018-04-26 18:21:48

For anyone coming to this on 2018, there is a plugin that fix it. Just install this and input.focus() will work automatically without any additional work.

@xMythicx 2014-10-03 19:00:20

It seems that in iOS 8 there has been an API change on the default handling for the javascript focus() command. If your application is a hybrid app in which you have direct control over Apple's web view facade the below is directly from apples docs.

A Boolean value indicating whether web content can programmatically display the keyboard.

[myWebView setKeyboardDisplayRequiresUserAction:YES];

When this property is set to YES, the user must explicitly tap the elements in the web view to display the keyboard (or other relevant input view) for that element. When set to NO, a focus event on an element causes the input view to be displayed and associated with that element automatically.

The default value for this property is YES.

From the last paragraph it seems this method call is not strictly for the keyboard. It indicates that it is for input views across the board i.e. drop down and date picker etc.

It seems though there is a bug as this method call is not currently working for me. The current behavior I am receiving corresponds as if it defaults to NO.

@xMythicx 2014-10-13 13:11:35

I have opened a bug report with apple about the issue. Hopefully it will be resolved in the next update. Fingers crossed!

@Del 2015-07-21 07:37:10

If you are developing a Cordova project, you can fix it adding this line

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

to your config.xml file. Tested in IOS 8.3 and IOS 8.4

@Leon 2015-10-24 09:13:51

It works for me on ios9, thank you

@waza123 2016-02-28 19:26:18

webview.keyboardDisplayRequiresUserAction = false; // tested on 9.2.1

@Adam Fraser 2015-07-27 23:30:03

Here's a conditional monkeypatch for jQuery.focus so you don't need to add the userAgent test everywhere.


if (/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
  (function($) {
    return $.fn.focus = function() {
      return arguments[0];


if /iPad|iPhone|iPod/g.test navigator.userAgent
  (($) ->
    $.fn.focus = ->

Note: I'm returning arguments[0] so we don't break method chaining such as $(el).focus().doSomethingElse()

@Lipata 2015-04-01 15:29:45

I've logged a bug about this into the Apple Bug Reporter and they closed it as duplicate, which is a sign they are working on fixing this. Unfortunately they didn't give me some more information about the duplicate item or about the problem itself. I can only see the duplicate item state, which is Open.

@Metagrapher 2015-07-14 14:10:45

any new update?

@Lipata 2015-08-04 16:25:53

I'm sorry, I don't have new information from Apple.

@Metagrapher 2015-08-06 20:44:59

All good. Thanks much!

@Geek 2015-11-02 10:19:08

Any recent updates about this?

@Brian Nickel 2014-10-01 20:31:14

It looks like you're definitely hitting an iOS 8 bug. In iOS7, Safari would (apparently) ignore or keep unfocused elements that had focus set prior to page load. This includes both <input autofocus> and input.focus() that occur up to some point, possibly page load (I tested just with an inline script).

In iOS 8, Safari is now apparently remembering that the element was focussed but not actually focussing it until a touch down event. It is then blindly sending a click event to whichever element received the touch up.

Both browsers behave the same for input.focus() occurring after page load. They both zoom to the element and bring up the keyboard.


The good news is that you only need to be worried about new behavior on elements you want to prefocus. The other good news is that while you will have to use a user-agent workaround, you can use it for all iOS versions since they were already behaving like you weren't autofocusing:

if (!/iPad|iPhone|iPod/g.test(navigator.userAgent)) {

This appears to be the approach uses based on some basic user-agent testing:

  • Mac Book Pro: autofocus before page load.
  • iPhone: no autofocus
  • iPad: no autofocus
  • Kit Kat (Android): focus after page load, possibly doing extra detection for presence of software keyboard.

If you haven't, you should go ahead and file a radar with Apple at

@Hai Phan 2015-02-09 21:02:20

why the extra parentheses? if (! /iPad|iPhone|iPod/.test(navigator.userAgent))

@Brian Nickel 2015-02-09 21:58:11

@HaiPhan No reason other than that I love parenthesis. Updating.

@maxhud 2016-11-20 06:48:14

<input autofocus> was the problem for me here. Very helpful!

@Diodeus - James MacFarlane 2014-12-11 14:50:24

I have a solution:

  1. Disable all inputs
  2. Enable the input you wish to focus
  3. Set the focus to that input
  4. Re-enable all the other inputs

@peteorpeter 2015-01-10 12:39:30

I tried this (briefly) with no success - could you post some example code?

Related Questions

Sponsored Content

38 Answered Questions

[SOLVED] Scroll to the top of the page using JavaScript/jQuery?

39 Answered Questions

[SOLVED] How to Check if element is visible after scrolling?

37 Answered Questions

[SOLVED] Close iOS Keyboard by touching anywhere using Swift

  • 2014-06-09 18:38:10
  • lagoon
  • 321317 View
  • 365 Score
  • 37 Answer
  • Tags:   ios swift uikeyboard

35 Answered Questions

[SOLVED] iOS - Dismiss keyboard when touching outside of UITextField

3 Answered Questions

[SOLVED] IOS virtual keyboard obscuring page bottom text box

17 Answered Questions

[SOLVED] Modifying location.hash without page scrolling

12 Answered Questions

[SOLVED] Xcode 6: Keyboard does not show up in simulator

0 Answered Questions

1 Answered Questions

WPF Touch Keyboard for windows 8

1 Answered Questions

[SOLVED] How to focus a div for keyboard scrolling in Opera

Sponsored Content