38

This is an HTML / CSS / JS (jQuery) iPad app. I've got a button, that slides down an input form. I'd like to focus the user on the input, and then launch the keyboard.

This is what I'm working with, but doesn't work:

$('#myFormField').focus();

This does indeed focus the input, but fails to launch the keyboard. Is it just not possible (for security reasons or whatever)?

Is there a way to force or simulate a user tapping the input (or anything for that matter)?

BenMorel
  • 34,448
  • 50
  • 182
  • 322
KrazyKen04
  • 421
  • 1
  • 4
  • 7
  • 1
    did you check this? http://stackoverflow.com/questions/6738846/open-the-keyboard-of-an-ipad-through-javascript-on-a-non-text-field – Niczem Olaske Jul 31 '13 at 23:44

5 Answers5

4

Try this

Tested on Safari iPhone 7 & iPhone 6 Plus, Android 4.4

and it opened iOS virtual keyboard successfully when I touched the button.

condition

1) make a Button to trigger keypress event => $('.btn_abc')

2) make a text input tag, and set the ID to this element => $('#search_input')

$( document ).ready(function() {

  var focusTextField = function(){
    console.log("focusElement");
  };

  var onKeypressHandler = function(){
    console.log("* * * keypress event handler")
    $('#search_input').blur().focus();
  };

  var onClickHandler = function() {
    $('.btn_abc').trigger('keypress');
  };

  $('#search_input').bind('focus', focusTextField);
  $('.btn_abc').bind('click', onClickHandler);
  $('.btn_abc').bind('keypress', onKeypressHandler);

});
YakovL
  • 7,557
  • 12
  • 62
  • 102
jamy
  • 405
  • 3
  • 6
3

Maybe these links can help you:

Sylter
  • 1,622
  • 13
  • 26
2

Turn that button into an input field then instantly swap focus to the main input field. They keyboard will open and stay opened. Below is an example using a button like you asked, placing a transparent input field over the button the user clicks. Tested on an iPhone 4 (iOS 6/7) and an HTC Windows phone.

The input you want the user to focus on:

<input id="main" />

The button the user presses (with input field overlayed using css):

<a>Button</a><input onfocus="FocusMain()" />

Swap focus instantly:

function FocusMain()
{
    $("#main").focus();
}
user2638216
  • 21
  • 3
  • 2
    A demo would go a long way. – ceejayoz Jul 31 '13 at 13:21
  • For me, using just $('objId').focus(); did the trick. I’m using it for a clear text box value button that originally cleared out the text box and the keyboard would annoyingly disappear too now the keyboard stays open. Awesome and thanks – user2108555 Mar 11 '20 at 18:06
-2

Try:

$('#element').blur().focus();

or if that does not work:

$('#element').focus().blur().focus();

blur() eliminates the focus and focus() brings it back. For some reason, it works every time compared to focus() working once in a while on its own.

Bobby
  • 931
  • 2
  • 8
  • 21
  • 2
    same as above - this will not work... by design, phones do not allow showing keyboard on focus, a person needs to click on the input directly or use a focus() from within an onClick() event on another element – Zathrus Writer Aug 22 '12 at 07:42
  • 1
    sorry, I have just realized that iPhone and iPad from iOS version 5 have ability for this to work, but Android certainly will chew on this – Zathrus Writer Aug 23 '12 at 07:19
-2

This should do what you want:

$("#element").focus().click();
Collective Cognition
  • 697
  • 1
  • 4
  • 8
  • Doesn't work! I tried also, using setTimeout delay, and triggering the ontouchstart and ontouchend to simulate a touch on a input, but no progress. – Vitim.us Nov 16 '11 at 16:32
  • 2
    this will not work... by design, phones do not allow showing keyboard on focus, a person needs to click on the input directly or use a focus() from within an onClick() event on another element – Zathrus Writer Aug 22 '12 at 07:40
  • 3
    It's worth noting that this DID work at the time of posting, on the version of Safari which was current then. – Collective Cognition Jul 19 '13 at 18:42