Question

为什么这不会选择（例如以蓝色突出显示）满意的<div>？

注意：我使用的是Firefox 36.0.1（Windows 7）

$('#b').click(function() { $('#a').select().focus(); } );

<div id="a" contenteditable>Hello</div>
<div id="b">click here</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 1

select（）函数不适用于contenteditable元素。看到@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select。

HTMLInputElement.select（）方法选择＆lt;中的所有文字textarea＆gt; 元素或＆lt;输入＆gt; 元素和文本字段。

您可以设置范围以选择文本或文本的一部分。要选择可信的文本，您可以使用：

function selectAll() {
  var editor = document.getElementById('a');
  var selection = document.getSelection();
  selection.removeAllRanges();
  var range = document.createRange();
  range.selectNodeContents(editor);
  selection.addRange(range);
}

http://codepen.io/anon/pen/QNPGxW

Answer 2

根据建议here，这有效，至少对于Firefox：

$('#b').click(function() { $('#a').select().focus(); document.execCommand('selectAll', false, null); } );

<div id="a" contenteditable>Hello</div>
<div id="b">click here</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

触发选择满足

2 个答案: