32

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?

1
  • 2
    Is it not possible to use JS to detect if the user is coming from an iPad, then replace your editable DIV with a textarea?
    – Pwnna
    May 15, 2011 at 4:24

7 Answers 7

18

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>
1
  • 1
    Any idea how to programmatically test if my code is considered "initiated via a user action" or not?
    – adamdport
    Jan 18, 2017 at 19:56
13

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.
7

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.

1
  • That's not the answer to the question. OP wishes to know how to tell iOS to open the keyboard using javascript. May 30, 2013 at 15:46
2

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.

1

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.

1
  • 1
    I would think that Content Editable is a diferent beast altogether. That is something that would need to be implemented at the browser level. I'm simply trying to get the keyboard to appear and send key press events down to the document, my editor will take care of the rest. Jan 7, 2011 at 13:31
1

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
1
-1

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>
2
  • select() function displays keyboard.
    – rakeshNS
    Aug 22, 2013 at 11:14
  • 6
    select() function does not displays keyboard! Sep 4, 2014 at 0:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.