CODEWITHSUNDEEP
javascripthtmlsmartphonesoft-keyboard
immobiluser
immobiluser

Reputation: 359

Force software keyboard to show on focused input in HTML load

With simple HTML page, how to open programmatically software keyboard after document loaded on smartphones ? For better user ergonomics, the goal is to focus on the first input with the softkeyboard already open. Just to write and continue.

Without any interaction of user, and after page is loaded, neither .focus() .click() and trigger touchstart/touchend/mousedown/mouseup open the system soft keyboard.

An idea ?...

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <script>
    var loadDOM = 0;
    var loadload = 0;

    function fullloaded() {
      if (loadDOM == 1 && loadload == 1) {
        var el = document.getElementById('test2');
        triggerEvent(el, 'touchstart');

        var el = document.getElementById('test2');
        triggerEvent(el, 'touchend');

        var el = document.getElementById('test2');
        triggerEvent(el, 'mousedown');

        var el = document.getElementById('test2');
        triggerEvent(el, 'focus');
        el.focus();

        var el = document.getElementById('test2');
        triggerEvent(el, 'mouseup');

        var el = document.getElementById('test2');
        triggerEvent(el, 'click');
        el.click();
      }
    }

    document.addEventListener('DOMContentLoaded', function(e) {
      logEvent('DOMContentLoaded');
      loadDOM = 1;
      fullloaded();
    });

    window.addEventListener("load", function(event) {
      var logEvent('load : All resources finished loading!');
      loadload = 1;
      fullloaded();
    });
  </script>
</head>

<body>
  <input id="test2" placeholder="_default_" />
</body>

</html>

Upvotes: 0

Views: 1215

Answers (2)

Leo
Leo

Reputation: 1027

After testing around with several devices, short answer is you can't open the softkeyboard on load of the webview, because the user hasn't "touched" any element on the screen.

After the user touched the screen the focus() on any input text element should bring up the keyboard, but unfortunately that first opening of the keyboard on the load of the page without the user touching the screen is not possible, so even a setTimeout or delay on this action also wouldn't work unless the user touches the screen within that timeframe.

Upvotes: 0

basaya
basaya

Reputation: 124

try this..

<input type="text" autofocus>

in javascript try this

$(function() {
var el = document.getElementById('.class');
    el.focus();
});

Upvotes: -2

Related Questions