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();
         


        

Answer 1

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.

Answer 2

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.

Answer 3

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 :-)