javascript - 具有 selectAll 焦点的 Contenteditable div 不能完全工作

Question

我在这样的表格中有一些 div:

<div contenteditable="true"
     onfocus="document.execCommand('selectAll',false,null)">Something</div>

当通过单击聚焦一个 div 时，一切正常，整个文本都被选中。

问题是，当我通过选项卡在 div 之间导航时，我想要相同的行为。事实上，按选项卡导航只允许我编辑 div 而无需选择文本。

我怎样才能做到这一点？

Answer 1

在元素获得焦点后执行命令，而不是在焦点上。要延迟它，您可以 use a timeout ，这会将回调放入事件队列，在元素获得焦点后执行。

您的代码应该是(不使用任何内联脚本，但使用有问题的 jQuery 标记):

$('div[contenteditable]').on('focus', function() {
  setTimeout(function() {
    document.execCommand('selectAll', false, null)
  }, 0);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div contenteditable>Something</div>
<div contenteditable>Something New</div>