我如何：使用 JavaScript 选择一个段落（点击时）？

Question

是否可以使用 JavaScript 选择所有文本和一个元素（例如，段落 <p>）？很多人认为 jQuery .select() 会这样做，但事实并非如此。它只是触发一个事件。请注意，<input> 元素的 DOM 对象具有原生的 select() 方法，但大多数其他元素（例如 <output> 和 <p>）没有。

（我是否需要使用 content-editable 才能使其工作？）

Answer 1

如果需要支持更高版本的浏览器，即IE9+，可以使用以下

document.querySelector('button').addEventListener('click', function(){
    var range = document.createRange();
    var selection = window.getSelection();
    range.selectNodeContents(document.querySelector('p'));
    
    selection.removeAllRanges();
    selection.addRange(range);
});
                                          
                                          
                                          
                                          

Hello <p>Select me</p> World
<button id ='btn'>Select text</button>

相关链接：

• 规格：http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-Range-method-selectNodeContents
• http://help.dottoro.com/ljcpcpnt.php
• https://developer.mozilla.org/en-US/docs/Web/API/range.selectNodeContents
• https://developer.mozilla.org/en-US/docs/Web/API/Selection.addRange

有关所有浏览器的支持，请参阅https://stackoverflow.com/users/96100/tim-down 中的https://github.com/timdown/rangy

Answer 2

select() 仅适用于 <input> 和 <textarea> 元素...

也是的，你必须使用：

contenteditable="true"

并使用.focus() 选择所有文本。

试试这个：

<p id="editable" contenteditable="true" 
onfocus="document.execCommand('selectAll',false,null);">Your Text Here</p>

<button onclick="document.getElementById('editable').focus();" >Click me</button>

JSFiddle Demo