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

Posted 2023-03-06

【中文标题】我如何：使用 JavaScript 选择一个段落（点击时）？

【英文标题】：How can I: Select a paragraph with JavaScript (on click)?

【发布时间】：2014-10-16 19:30:00

【问题描述】：

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

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

【问题讨论】：

如何选择？选择带有.html() 或.text() 的内容，或者像使用鼠标一样通过拖动突出显示文本？

@j08691 可能会突出显示，因为 OP 谈到选择 <input /> 的内容

***.com/a/2044793/96100, ***.com/a/2838358/96100

【参考方案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://***.com/users/96100/tim-down 中的https://github.com/timdown/rangy

【讨论】：

太棒了，太棒了，这不需要contenteditable。此外，包括代码 sn-p、规范参考、工作小提琴、指向更多信息的链接的主要道具！ A+++答案

【参考方案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

【讨论】：

这不会在 Chrome 上为我选择文本。看我的回答***.com/a/25456308/227299

您的 jsFiddle 仅在可编辑段落已经获得焦点时才对我有用，这让我想到了使用 window.setTimeout 来允许焦点命令首先完成。成功。这是我的小提琴叉：jsfiddle.net/alanhogan/nfqx0ex2