Как избежать потери внимания на элементе contenteditable, когда пользователь нажимает за пределами этого элемента? - PullRequest
Новая
       24

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

9 голосов
/ 12 сентября 2011

Я хочу предотвратить потерю фокуса в области 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 или где-либо за пределами элемента #content, вы теряете фокус на элементе #content, даже если вызываете функцию предотвратительного вызова события click.

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

Спасибо.

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

Ответы [ 2 ]

35 голосов
/ 14 сентября 2011

Поместив вопрос Хуана в ответ, вместо использования события щелчка, вы должны использовать событие 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/

0 голосов
/ 12 сентября 2011

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

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

...