CODEWITHSUNDEEP
javascriptiosweb-applicationskeyboard
user1022241
user1022241

Reputation:

Trigger iOS keyboard in web application on non-text element

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?

Upvotes: 2

Views: 7977

Answers (2)

Julian F. Weinert
Julian F. Weinert

Reputation: 7570

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 :))

Upvotes: 2

jonjbar
jonjbar

Reputation: 4066

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!

Upvotes: 1

Related Questions