CODEWITHSUNDEEP
javascriptjqueryhtmlios
crooksey
crooksey

Reputation: 8809

Force show keyboard on autofocus ios web browser

There are lots of topics that address this issue, but all seem to be old and not relevant (ass further ios releases come out).

I have developed an applciation that is run via a web browser, be it safari or firefox (on an iPad). The webpage has an autofocus on an input, and I need to force the keyboard open.

I have tried without any success to do this with numerous jQuery hacks for focus, with timeouts etc etc. I have read that this might be possible with cordova, but before I re-develop the application is there anyway to do this with another JS libary thats easily "pluginable" to my existing html pages.

The closest I have come is this code, that when I press a button on the page, it then puts a focus on my form input and shows the keyboard:

<script type="text/javascript">
    window.addEventListener('DOMContentLoaded', function() {
      var button = document.querySelector('#button');
      var input = document.querySelector('#input');
      var focus = function(e) {
        e.stopPropagation();
        e.preventDefault();
        var clone = input.cloneNode(true);
        var parent = input.parentElement;
        parent.appendChild(clone);
        parent.replaceChild(clone, input);
        input = clone;
        window.setTimeout(function() {
          input.value = input.value || "";
          input.focus();
        }, 0);
      }
      button.addEventListener('mousedown', focus);
      button.addEventListener('touchstart', focus);
    }, false);
  </script>

Is there any way I can simulate clicking the button, I have tried the following but this does not work on any browser, let alone IOS:

<script type="text/javascript">
$(document).ready(function() {
    $("#button").click();
});

</script>

So in short, can I simulate a click on this button? If I can get this working on my desktop, I will cross my fingers it then works on IOS.

Or if anyone else has any suggestions/ideas/hacks I would be extremely grateful.

Working example of my above code is taken from here

EDIT:

So I can force the button to be pressed after a time delay (with a MouseEvent), to simulate a real life touchdown event, but it only puts focus on the input box on ios, it does not bring up they keyboard prompt sigh (it does work on desktop browsers though), Looks like I will have to re-write in cordova.

<script type="text/javascript">
    $(document).ready(function() {

        function focusinput(){
        var evt = new MouseEvent("touchstart", {
            view: window,
            bubbles: true,
            cancelable: true,
            clientX: 20,
            /* whatever properties you want to give it */
        }),
            ele = document.getElementById("button");
        ele.dispatchEvent(evt);
        } 


        function focusinputa(){
        var evt = new MouseEvent("mousedown", {
            view: window,
            bubbles: true,
            cancelable: true,
            clientX: 20,
            /* whatever properties you want to give it */
        }),
            ele = document.getElementById("button");
        ele.dispatchEvent(evt);
        }

        ;

        setTimeout(focusinput, 1000);
        setTimeout(focusinputa, 1500);


    });

</script>

EDIT2:

It seems there is no way at all to do this (as of writing this ios 9.1), inside a native html/js webpage, if anyone has any other solutions or ideas to test I would be happy to test them, but as for now I have had to resort to a a manual click of a button to focus the input and bring up the keyboard prompt.

Upvotes: 4

Views: 5754

Answers (1)

diegofelipece
diegofelipece

Reputation: 64

I had a similar issue, and after a lot of tests i've got a simple solution, I hope it helps anyone ;)

First of all, Safari apparently make the focus, but do not open the keyboard. So I tried to change my < button> for a < label>. This worked for me.

<label for="search" id="mobile-search">Search</label>
<input type="text" name="search" id="search" value="">

<script type="text/javascript">
  $('#mobile-search').on('click', function() {
    // do your stuff, in my case some class changes
  });  
</script>

Just be sure that you are not to using a .preventDefault(); on the click event.

Upvotes: 1

Related Questions