iPad HTML Focus

Question

I have an issue with focusing a text field on the iPad. Where I use:

$(document).bind("click",function(event) {
    alert('click');
    focusTextArea();
});

The focus is set to the text area, and a keyboard appears. However when called with touchend, focusTextArea is not called and the keyboard is not made visible. My focusTextArea function is:

function focusTextArea() {
    $('#textArea').focus();
}

Does anybody know why this occurs, and how I might be able to get this to work?

TIA,

Adam

Can you elaborate on what you meant by "when called with touchend"? — Tim, May 12 '11 at 13:24
@tim, Sorry I meant replacing the click event argument of bind with the touchend event. — apchester, May 12 '11 at 13:51
http://stackoverflow.com/questions/3714084/autofocus-with-keyboard-in-an-ipad-html5-site and http://stackoverflow.com/questions/5287342/jquery-focus-method-on-the-ipad — Kheldar, Aug 31 '11 at 12:19
I got around this by adding a div that covered the whole display area with some basic instruction in the middle "Tap to Begin". Then bound a "tap" event to the div. The tap then hid the div and set focus to the textbox. That was the only way I could find to get around this crazy problem. — Ads, Nov 29 '13 at 04:05

score 15 · Accepted Answer · edited May 23 '17 at 12:25

15

Unfortunately, focusing is not possible with the iPad. The only way the focus will be placed in the desired field is when the user 'clicks' on the desired field.

Update 2015-01-08:

As explained in this answer by Matt:

... iOS will only allow focus to be triggered on other elements, from within a function, if the first function in the call stack was triggered by a non-programmatic event. In your case, the call to setTimeout starts a new call stack, and the security mechanism kicks in to prevent you from setting focus on the input.

edited May 23 '17 at 12:25

Community

1
1

answered Nov 25 '11 at 08:32

halfpastfour.am

5,764
3
44
61

1

Additionally, in an onclick event for any element, you can call focus() to another input. – robocat May 08 '12 at 04:33
4

not completely true: if the focus is triggered within the callback of a click event on another INPUT field, this actually works (unless you have an animation in between which seems to interrupt this option again...). so yes it does kinda (not) work, sort of :P – Jörn Berkefeld Apr 23 '13 at 13:21
1

Any references to support that Bob? I know myself first hand that focus doesn't work properly. I'm just wondering if Apple has said anything about it themselves. – Daft Jan 07 '15 at 12:05

score 0 · Answer 2 · answered Apr 14 '14 at 23:00

Sorry folks, I guess I have to bring you a bad news :-)

So much questions for "HOW DO I FOCUS ON AN INPUT FIELD ON IPAD USING CLICK HANDLER ?" And sooooo much answers which doesn't really help ...

The bad news, which is not really a news, is that it isn't possible, because the focussed element will loose the focus again, while the operation of the clicked paragraph is subject to be finished.

The example above again here for explaination

$(document).bind("click",function(event) {
    alert('click');
    focusTextArea();
});

means: 1. focus on document 2. fire the click event (focus on textarea) 3. get back to document (document gets focus again) 4. finishig click event, document looses focus.

Now to the goooood news !

The final solution (tested an iPhone, iPad and android with native internet app, firefox and chrome) is: Use touchend or mouseup instead !

$(document).bind("touchend",function(event) {
    alert('click');
    focusTextArea();
});

or

$(document).bind("mouseup",function(event) {
    alert('click');
    focusTextArea();
});

In combination with jquery plugin

* jQuery Browser Plugin v0.0.6
* https://github.com/gabceb/jquery-browser-plugin

I am using a small script which will detect platform (mobile or not) and set the correct clickhandler for later use.

var clickevent = '';
if ($.browser.mobile) clickevent = 'touchend';
else clickevent = 'click';

Now I can use the following

$(document).bind(clickevent,function(event) {
    alert('click');
    focusTextArea();
});

which will work for both, desktops and mobil devices.

Hope this helps :-)

Unfortunately, 'touchend' doesn't work in every case, but 'mouseup' does ! Please tryout and find your best practice. — ddlab, Apr 14 '14 at 23:34

score 0 · Answer 3 · edited May 23 '17 at 12:00

0

You should try fastclick js, should work. Check this example (also posted here).

Also I've made this jsfiddle example which seems to work on iPad (Chrome and Safari).

Hope this helps.

edited May 23 '17 at 12:00

Community

1
1

answered Mar 15 '17 at 08:47

ranbuch

1,584
16
14

iPad HTML Focus

3 Answers3

Linked

Related