Question

如果在该区域外单击，我想阻止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之外的任何地方时，即使您调用click事件的preventDefault函数，也会失去对#content div的关注。

此外，范围会在点击事件触发的那一刻发生变化，因此我不能在点击发生后返回上一个范围。有没有办法在点击发生后保持光标位置和焦点？

感谢。

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

Answer 1

将Juan的问题写入答案，而不是使用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/

Answer 2

尝试在$('#content').focus();之后添加e.preventDefault(); 它不是一个完美的解决方案，因为它跳到了开头，但试一试。

无论如何，你确定强迫用户回到这个区域是个好主意吗？：）

Answer 3

answer 将event.preventDefault()添加到mouseDown事件中。

const button = document.getElementById('boldFormat')

button.addEventListener('mousedown', (event) => {
  event.preventDefault() // prevent loss of focus
  document.execCommand('bold', false)
})

发生此问题是因为您正在听click事件，该事件导致contentEditable元素失去焦点；不管您是否运行preventDefault。

当用户点击该元素外部时，您如何避免失去对可信元素的关注？

3 个答案: