CODEWITHSUNDEEP
javascriptiphonehtml
Ross
Ross

Reputation: 9928

How do I focus an HTML text field on an iPhone (causing the keyboard to come up)?

I'm writing an iPhone web app, and I want to automatically focus a text field when the page is loaded, bringing up the keyboard. The usual Javascript:

input.focus();

doesn't seem to be working. Any ideas?

Upvotes: 26

Views: 37373

Answers (7)

robocat
robocat

Reputation: 5413

Edit: The following no longer works on iOS - UIWebView did allow autofocus and home screen links used to autofocus but they disabled that many versions ago.

The autofocus (see below) property doesn't work from a url in Mobile Safari but does work if you are:

  1. using a UIWebView
  2. using a home screen link

The fontsize of the input needs to be large enough to avoid the iOS10 zoom on double-tap (now that viewport is always zoomable) and to design the page to be sized so that it fits the screen (otherwise on page loading you get strange timing/race bugs in zoom, or if scrollable the field sometimes doesn't center to the screen properly).

autofocus: The HTML5 spec for doing this is the autofocus property of the input tag. But iOS ignores that, presumably for a cleaner UI that doesn't pop up the touch keyboard when navigating to a page. Here is a page that demonstrates the autofocus property. Before HTML5 you would call element.focus() in the window.onload event. However focus() calls are not supported on iOS except during the handler of an onclick event.

Upvotes: 6

Bee
Bee

Reputation: 61

If you are setting focus with from a click event, you need to preventDefault otherwise the click events default action will set focus on the clicked item.

Upvotes: 1

Dror
Dror

Reputation: 7305

Note: this answer is old and may not be relevant to newer versions out there...

It comes as no help to you but the last poster in this thread wrote that its a bug of the webkit engine.
I can't tell if its a verified bug or not...

Last post from way back machine (as original seems to not work):

I am developing my app in pure XHTML MP / Ecmascript MP / WCSS. So using native platform browser control api is really not an option for me. Yes the behaviour u mention is the same as mine. I searched his topic in the bugzilla at webkit.org and found that this indeed is a reported bug. focus() to a text box does highlight the element but does not provide a carat in it for the user to start entering text. Using a timer as mentioned by "[email protected]" does not help either.

This behaviour is common across platforms (s60,iphone,android) which use the webkit engine.

So as of now i dont see a solution to this problem.

Hope this helps

Upvotes: 3

Moustachiste
Moustachiste

Reputation: 510

A bit late maybe but for future person maybe. In our webapp running on iOS iPad (6 and more recent), we do it with a set interval:

startFocusOnTextField: function() {
        this.intervalIDForTextFieldFocus = window.setInterval(function() {
            document.getElementById(page.textInputFieldObj.id).focus();
        }, 150);
    },

Which is called on page load (jQuery mobile environment)

Upvotes: 0

Tuong Le
Tuong Le

Reputation: 19220

This is a workround:

setTimeout(function(){
    input.focus();
},500);//milliseconds

Upvotes: -6

Milos
Milos

Reputation: 240

I have a similar issue, only my issue is that the focus will not occur on a 'touchend' event.

http://jsfiddle.net/milosdakic/FNVm5/

The following code will work in Chrome/Safari etc. but will fail on Mobile Safari. The only way to get it to work is to make the event on 'click', but seeing as the code is made for an iOS device, it would benefit for it to work with touch events.

It seems to be a bug with the Webkit engine.

Upvotes: 2

BAM
BAM

Reputation: 201

It will only show the keyboard if you fire focus from a click event, so put a button on the page with a onclick that does the focus and it will show the keyboard. Completely useless except for validation (on click of submit validation code focuses on invalid element)

Upvotes: 20

Related Questions