Open the Keyboard of an iPad through JavaScript on a non-text field?

Question

I have a div that acts as a textbox through some clever javascript. Yes, that smells, but it's vendor code I can't change :(

On an iPad, the Keyboard doesn't show because it's not a text field. Is there a way to force open the Keyboard through javascript, or decorate the HTML with something that tells Safari "Yes, this is really a textfield, just trust me!"?

Answer 1

From my experience there is no way to bring up the iPad or iPhone keyboard through Javascript. I ended up using a workaround that might be useful.

I simply place a text field with it's opacity set to 0 over the div in question. Then I update the div with the text field content on change.

like so ( using jQuery )

$('textarea').bind('input', function(e){
    var changedVal = $( e.currentTarget ).val();
    $('div').html( changedVal );    
});

// The input event is not a cross browser solution, use a combination of 
// keyboard and mouse events to correctly respond to any changes in the textarea

If your vendor code rely's on keyboard or mouse event listeners to do it's magic, you could proxy all the event types onto the div beneath.

Something like so ( using jQuery )

$('textarea').bind('keyup keydown keypress mouseup mousedown click', function(e) {
    e.currentTarget = $('div').get(0);
    $('div').trigger(e);
});