Closing keyboard on iPad in div contenteditable

Question

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

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

I want the keyboard to close when the user clicks a button.

Any thoughts are super appreciated.

Thanks.

Answer 1

As you mentioned in your comment, element.blur() unfortunately does not work on an editable div. But instead, you can shift the focus to the actual input field and immediately delete it:

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

(This uses your jsFiddle HTML code).

There are drawbacks to this approach: you need a different input field (which you cannot set to display: hidden or visibility: hidden , but you can set its size to 0 and opacity: 0 ). In addition, the view can scroll to the location of this input field when invoking the above handler. Thus, you will need to place the second input field on the right or next into the editable div.

You will also need to make sure that the input fields are not targeted using the previous / next buttons: set it off.

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

To focus / blur you will need to enable the field:

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

However, this is certainly a workaround. I have not yet found another solution (for example, removing the contenteditable attribute does not work), but I would really like to hear other ideas.

Answer 2

You should be able to do just that: attach an event listener to the button and use it in the blur() input field that caused the keyboard popup (use JavaScript to get a handle to this element and then call it blur ). This supposedly closes the iPad keyboard.