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

Question

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

still i am working please use chrome or Firefox for web page — manan5439, Jun 18 '18 at 09:59

score 1 · Accepted Answer · answered Jun 29 '18 at 08:30

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.

I am giving you a 50 bounty for your attention and also up vote — manan5439, Jun 29 '18 at 18:39

score 0 · Answer 2 · answered Jun 18 '18 at 10:30

0

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

});

});

answered Jun 18 '18 at 10:30

ikirachen

77
7

it give a lastSelect.select is not a function error – manan5439 Jun 18 '18 at 10:52

score 0 · Answer 3 · answered Jun 28 '18 at 01:56

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

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

3 Answers3