Закрытие клавиатуры на iPad в div contenteditable

Question

Есть ли способ заставить клавиатуру на iPad закрыться при размытии div 'contenteditable' ??

Вот базовый jsfiddle: http://jsfiddle.net/j_tufte/7HDmN/

Я бы хотел закрыть клавиатуру, когда пользователь нажимает на кнопку.

Любые мысли очень ценятся.

Спасибо.

Answer 1

Как вы упомянули в своем комментарии, element.blur(), к сожалению, не работает с редактируемым div. Но вместо этого вы могли бы переместить фокус на фактическое поле ввода и сразу же удалить его:

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

(используется ваш HTML-код jsFiddle).

У этого подхода есть недостатки: вам нужно другое поле ввода (которое нельзя установить на display: hidden или visibility: hidden, но вы можете установить его размер на 0 и opacity: 0). Кроме того, представление может прокручиваться к местоположению этого поля ввода, когда вызывается вышеуказанный обработчик. Поэтому вам нужно будет поместить второе поле ввода рядом с редактируемым тегом div или позади него.

Вам также нужно позаботиться о том, чтобы поле ввода не было предназначено для кнопок «предыдущий / следующий»: установите его отключенным.

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

Для фокусировки / размытия вам необходимо включить поле:

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

Однако это определенно обходной путь. Я не нашел другого решения (например, удаление атрибута contenteditable не работает), но мне бы очень хотелось услышать другие идеи.

Answer 2

Вы должны быть в состоянии сделать именно это - присоедините прослушиватель событий к кнопке и используйте его для blur() поля ввода, которое вызвало всплывающее окно клавиатуры (используйте JavaScript, чтобы получить дескриптор этого элемента, а затем вызвать его blur метод).Это якобы закрывает клавиатуру iPad.