CODEWITHSUNDEEP
javascriptjquery
manan5439
manan5439

Reputation: 958

keyboard appear when ready in mobile browser with using only javascript or jquery?

Is there any way to show keyboard with selected edit text. I used focus() which is perfectly work for in browser. I am able to edit text when browser is ready. Below is my code

$(document).ready(function() {
    var allSelects = document.getElementsByTagName("p");
    var lastSelect = allSelects[allSelects.length - 1];
    lastSelect.focus();

    $("#main_container").click(function() {

        lastSelect.focus();

    });
});

but when I load this site in mobile device then it is not appears mobile keyboard unless touch.

please find out the solution. Thanks in advance

Upvotes: 1

Views: 1024

Answers (3)

Takit Isy
Takit Isy

Reputation: 10081

I tried to create a working snippet with your code. I changed a little the syntax to use .on() and .trigger() methods.

Maybe you can use the .trigger() method with touchstart to achieve what you want:

$(document).ready(function() {
  var allSelects = document.getElementsByTagName("p");
  var lastSelect = allSelects[allSelects.length - 1];

  $("#main_container").on('click', function() {
    lastSelect.focus();
    $(lastSelect).trigger('touchstart');
  });

  $("#main_container").trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_container">
  <p contenteditable=true>Some text</p>
  <p contenteditable=true>Some text</p>
  <p contenteditable=true>Some text</p>
</div>

Hope it helps.

Upvotes: 1

Mike B.
Mike B.

Reputation: 1502

If you're using iOS/Safari as your mobile device, it doesn't allow setting focus unless it's in response to a user input event (i.e. touch).

I think this is a feature of mobile Safari rather than a bug. In our work on FastClick, my colleagues and I found that 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.

See this post

Upvotes: 0

ikirachen
ikirachen

Reputation: 77

Try using:

$(document).ready(function() {
var allSelects = document.getElementsByTagName("p");
var lastSelect = allSelects[allSelects.length - 1];
lastSelect.focus();
lastSelect.select();

$("#main_container").click(function() {

    lastSelect.focus();

});

});

Upvotes: 0

Related Questions