javascript - Closing keyboard on iPad in div contenteditable - Stack Overflow

admin管理员组

文章数量:1317909

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

Here is a basic jsfiddle: /

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

Any thoughts super appreciated.

Thanks.

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

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

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

Any thoughts super appreciated.

Thanks.

• javascript
• ipad
• contenteditable

Share Improve this question Follow asked Jan 20, 2012 at 23:34 tuddytuddy 1,83444 gold badges3131 silver badges3636 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

As you have mentioned in your ment, 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.

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.

本文标签： javascriptClosing keyboard on iPad in div contenteditableStack Overflow