Как избежать потери фокуса на элементе contenteditable, когда пользователь щелкает вне этого элемента?

Я хочу, чтобы contentEditable область от потери фокуса, если щелчок сделан за пределами этой области. Некоторые примеры HTML выглядят так:

<div id="content">
    <p>Hello</p>
</div>
<div id="clickThis">
    <p>If you click on this or anywhere for that matter after focusing on Hello, you lose your focus on Hello</p>
</div>

пример JavaScript выглядит следующим образом:

$(document).ready(function()
{
    $('#content')[0].contentEditable=true;

    $('#clickThis').bind('click',function(e)
    {
        console.log(window.getSelection().getRangeAt(0).startContainer);
        e.preventDefault();
    });
});

при нажатии на кнопку #clickThis div или где-нибудь вне #content div, вы теряете фокус на #content div, даже если вы вызываете функцию preventDefault события click.

кроме того, диапазон изменяется в момент запуска события click, поэтому я не могу просто вернитесь к предыдущему диапазону после щелчка. Есть ли способ сохранить положение курсора и фокус после щелчка?

спасибо.

jsFiddle:http://jsfiddle.net/VivekVish/FKDhe/4/

9
contenteditable javascript javascript-events

2 ответов

ставит вопрос Хуана в ответ, вместо того, чтобы использовать событие click, вы должны использовать событие mousedown следующим образом:

$(document).ready(function()
{
    $('#content')[0].contentEditable=true;

    $('#clickThis').bind('mousedown',function(e)
    {
        console.log(window.getSelection().getRangeAt(0).startContainer);
        e.preventDefault();
    });
});

вы можете видеть, как он работает здесь:

http://jsfiddle.net/FKDhe/7/

32

попробуйте добавить $('#content').focus(); после e.preventDefault(); это не идеальное решение, так как оно переходит к началу,но попробуйте.

в любом случае, вы уверены, что это хорошая идея, чтобы заставить пользователя вернуться к этой области? :)

0