CODEWITHSUNDEEP
jqueryiphoneipadmobilesafari
KrazyKen04
KrazyKen04

Reputation: 421

iPhone Mobile Safari: Force keyboard open

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

Upvotes: 38

Views: 37781

Answers (4)

jamy
jamy

Reputation: 405

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

});

Upvotes: 4

user2638216
user2638216

Reputation: 21

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

Upvotes: 2

Bobby
Bobby

Reputation: 931

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.

Upvotes: -2

Collective Cognition
Collective Cognition

Reputation: 697

This should do what you want:

$("#element").focus().click();

Upvotes: -2

Related Questions