Closing keyboard on iPad in div contenteditable

Question

Is there a way force the keyboard on iPad to close on blur of div 'contenteditable'??

Here is a basic jsfiddle: http://jsfiddle.net/j_tufte/7HDmN/

I'd like to have the keyboard close when a user clicks on the button.

Any thoughts super appreciated.

Thanks.

Answer 1

You should be able to do exactly that -- attach an event listener to the button and use it to blur() the input field that caused the keyboard popup (use JavaScript to get a handle on that element and then call it's blur method). That supposedly closes the iPad keyboard.

Answer 2

As you have mentioned in your comment, element.blur() unfortunately doesn't work on an editable div. But you could instead move the focus to an actual input field and remove it again right away:

$('#otherBox').on('click', function(){
    $('#orInput').focus().blur();
});

(This uses your jsFiddle HTML code).

There are downsides to this approach: you need another input field (which you can't set to display: hidden or visibility: hidden, but you can set it's size to 0 and opacity: 0). Also, the view may scroll to the location of this input field when the above handler is invoked. So you will need to place the second input field right next or behind to the editable div.

You will also need to take care of the input field not being targeted by the previous/next buttons: set it disabled.

<input id="orInput" disabled="disabled" style="width:0; height:0; opacity:0" type="text" />

For focussing/blurring you will then need to enable the field:

$('#otherBox').on('click', function(){
    $('#orInput').removeAttr("disabled")
                 .focus().blur().attr("disabled", "disabled");
});

However, this is definitely a workaround. I haven't found any other solution yet (e.g. removing the contenteditable attribute doesn't work) but I'd very much like to hear other ideas.