Manually triggering the iPhone/iPad/iPod keyboard from JavaScript

Question

I am developing an HTML code editor using simple DIV's and capturing events. When I use this on the iPad the keyboard never pops up since i'm not technically in an editable field.

Is there a way to programatically tell the iPad that I need a keybaord?

Solution 1

If your code is executed via something that was initiated via a user action then it will work.

E.g;

this works (pops keyboard):

<input type='text' id='foo'><div onclick='$("#foo").focus();'>click</div>

this doesn't work (input gets a border but no keyboard pop):

<input type='text' id='foo'>
<script>
  window.onload = function() {
    $("#foo").focus();
  }
</script>

Solution 2

Place a transparent textarea over the contentEditable div. The keyboard will open, as soon as the user focus the textarea.

Register an event listener on the textarea for the focus event and set the visibilityof the textarea to hidden. This prevents the blinking cursor.

Set the visibility of the textarea back to visible after the blur event occurred.

Register additional event listeners for keydown, keyup, keypressevents and process theses events the same way, as you process them in the contentEditable div.

Solution 3

To make the keyboard show on iOS devices you need to focus on an editable element such as an input or a textarea. Furthermore, the element must be visible and the .focus() function must to be executed in response to a user interaction such as a mouse click.

The thing is - we DON'T want the input element to be visible.. I have fiddled with this for quiet some time and eventually got the result I was looking for.

First, create an element you want to use to show the keyboard - in this case a button, and a hidden input element: (Working jsFiddle or Test on a mobile device)

<button id="openKeyboard">Open Keyboard</button>
<input id="hiddenInput" style="visibility: hidden;">

Then use the following javascript:

document.getElementById('openKeyboard').addEventListener('click', function(){
    var inputElement = document.getElementById('hiddenInput');
    inputElement.style.visibility = 'visible'; // unhide the input
    inputElement.focus(); // focus on it so keyboard pops
    inputElement.style.visibility = 'hidden'; // hide it again
});

Notes:

1. I have noticed that iOS safari will automatically scroll and zoom to the area of the input so make sure you use proper viewport and position your input element in a relevant location.
2. You can use some CSS on your input like setting the opacity, height and width to 0. However, if your input is completely hidden this won't work again, so make sure you leave the padding or border just so there's something to be rendered (even though it won't show up due to the opacity). This also means you shouldn't use display:none to hide it, hidden elements are just not allowed to be focused.
3. Use the regular keyboard events (keydown, keypress, keyup) on your hidden input to access the user's interaction as you would normally do. Nothing special here.

Solution 4

I have found that calling prompt("Enter some value") does trigger the keyboard on my iPad 2. Not sure if this is helpful in your situation or not.

Solution 5

The answers to this questions suggest that it's not possible: Why doesn't @contenteditable work on the iPhone?

A colleague of mine who was working on a similar project ended up using a textarea for the iPad version of his editor, and contenteditable divs/spans for browsers that support contenteditable. Perhaps something similar would work for you.

View more solutions