触发选择 contenteditable

Question

为什么这不是 select（即以蓝色突出显示等）内容可编辑的 <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

如建议的那样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>

Answer 2

select() 函数不适用于内容可编辑的元素。看@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select。

HTMLInputElement.select() 方法 select 将 </strong> 元素中的所有文本或带有文本字段的 <strong>< input ></strong> 元素。</p> <p>您可以将范围设置为select 文本或文本的一部分。要 select contenteditable 文本，你可以使用这个：</p> <pre><code>function selectAll() { var editor = document.getElementById('a'); var selection = document.getSelection(); selection.removeAllRanges(); var range = document.createRange(); range.selectNodeContents(editor); selection.addRange(range); } </code></pre> <p><a href="http://codepen.io/anon/pen/QNPGxW" rel="nofollow">http://codepen.io/anon/pen/QNPGxW</a></p> </section> </div> </div> <div class="line"></div> <div id="footer">©2023 WhoseBug</div> </body> </html>

触发选择 contenteditable

Trigger selection of contenteditable

javascript

jquery

contenteditable