2

I have a web application that uses a div that is not contentEditable. Instead, when the div is focused, I process key presses and insert / delete / update the innerHTML myself, essentially simulating a contentEditable div.

I don't care if it's necessarily with javascript, but I need a way to trigger the iOS keyboard from a web app.

I've tried floating an invisible text area over the div, and when it's focused, I hide the text area and shoot focus to the div. This works, but as soon as the non-contentEditable div is focused, the keyboard disappears. Note that this trick worked until iOS 5.

There has to be a way to trigger the iOS keyboard after user interaction in a web app, even if we're not on a text element. Any ideas?

2 Answers2

2

For a WebApp I need the keyboard too. I wanted it to work on iOS and so I created a little workaround.

The WebApp itself uses key listener to capture the pressed key (e.g. backspace for deleting elements).

I created a textfield with zero height, width and opacity. Don't use display:none; or visibility:hidden;. That causes iOS' Safari to not focusing the textfield.

function popKeyboard() {
    document.getElementById("dummyText").focus();
}

<input type="text" id="dummyText" style="width:0px; height:0px; opacity:none;" />
<input type="button" value="show keyboard" onclick="popKeyboard();" />

I hope that it helps you (even if you asked a year ago :))

Julian F. Weinert
  • 7,474
  • 7
  • 59
  • 107
1

The question has already been posted here: Manually triggering the iPhone/iPad/iPod keyboard from JavaScript

It looks like it is not possible I'm afraid!

Community
  • 1
  • 1
jonjbar
  • 3,896
  • 1
  • 25
  • 46
  • 1
    This security feature is ridiculous imo. Even after user interaction, why would an app not be able to trigger the keyboard? It in no way adds security, and a lot of apps could use the keyboard outside of an input element. –  Dec 03 '11 at 16:30