CODEWITHSUNDEEP
javascriptiphonehtmlipadkeyboard
Joe Bienkowski
Joe Bienkowski

Reputation: 331

Manually triggering the iPhone/iPad/iPod keyboard from JavaScript

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?

Upvotes: 33

Views: 52868

Answers (7)

Maciej Sawicki
Maciej Sawicki

Reputation: 331

Proxy input trick

I figured out another dirty workaround, but works well. The trick is based on the fact, that if the keyboard is already open, changing the focus will not close the keyboard.

  1. Add a small "proxy invisible input" in top left of the page with position fixed (the fixed position prevents the flicker, also make sure that the field has font-size bigger than 16px to prevent iOS page zoom on focus)
  2. On clicking the button, just .focus() on this invisible field. The keyboard will open...
  3. Show or render your other input fields
  4. Now with the keyboard open just .focus() on the desired input. You can use small setTimeout delay, for example 500ms if needed

Upvotes: 1

Yotam Omer
Yotam Omer

Reputation: 15356

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.

Upvotes: 12

Tony Findeisen
Tony Findeisen

Reputation: 400

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.

Upvotes: 7

Villi Katrih
Villi Katrih

Reputation: 389

Here's a solution for you:

<input id="my-input" type="text" />

<script type="text/javascript">
    var textbox = document.getElementById('my-input');
    textbox.select();
</script>

Upvotes: -1

Howard
Howard

Reputation: 3895

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>

Upvotes: 18

TimDog
TimDog

Reputation: 8928

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.

Upvotes: 2

Greg
Greg

Reputation: 33650

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.

Upvotes: 1

Related Questions