CODEWITHSUNDEEP
javascripthtmlmobile
vfioox
vfioox

Reputation: 738

Force keyboard to appear

How can I cause the keyboard to appear on my website? It's a javascript script that reads keyboard input, but I cannot get the keyboard to be shown on my mobile device.

Is there something that "fakes" standard input, and lets key events to be triggered?

I need to say that what am I trying to do is to enable the keyboard on jCubic terminal emulator: http://terminal.jcubic.pl/

Upvotes: 1

Views: 3988

Answers (1)

Ali Gajani
Ali Gajani

Reputation: 15091

You can do that the following way:

  • prompt() opens the keyboard
  • If you trigger .focus() from within a .click() event (e.g. from opening your dialog), the keyboard shows up

For Android and iOS, .focus() seems to work just fine, but you have to wait for the page to fully render.

See this example:

function focus() {
  $('input').focus();
}

$(function() {
  focus();

  $(document.body).load(focus);
  $('#click').click(focus);
  $('#click-timeout').click(function() {
    setTimeout(focus, 1000);
  });
  $('#mousedown').mousedown(focus);
  $('#mousedown-timeout').mousedown(function() {
    setTimeout(focus, 1000);
  });
  $('#mouseup').mouseup(focus);
  $('#mouseup-timeout').mouseup(function() {
    setTimeout(focus, 1000);
  });
  $('#extern-click-trigger').click(function() {
    $('#click').click();
  });
  $('#tap').bind('tapone', function() {
    focus();
  });
  $('#tap-triggering-click').bind('tapone', function() {
    $('#click').click();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<input />
<p id="click">Click handler</p>
<p id="click-timeout">Click handler setting timeout</p>
<p id="mousedown">Mousedown handler</p>
<p id="mousedown-timeout">Mousedown handler setting timeout</p>
<p id="mouseup">Mouseup handler</p>
<p id="mouseup-timeout">Mouseup handler setting timeout</p>
<p id="extern-click-trigger">Clicking here will trigger click on the first 'Click Handler'</p>
<p id="tap">Virtual 'TAP' handler</p>
<p id="tap-triggering-click">Virtual 'TAP' handler triggering click on the first 'Click handler'</p>

Upvotes: 1

Related Questions