选择一个JavaScript段落(点击)

Select a paragraph with JavaScript (on click)?

本文关键字：段落 点击 JavaScript 一个 选择      更新时间：2023-09-26

是否可以选择一个元素的所有文本(例如，段落<p>)与JavaScript?很多人认为jQuery .select()会做到这一点，但它没有。它只是触发一个事件。注意，<input>元素的DOM对象有一个原生的select()方法，但大多数其他元素(如<output>和<p>)没有。

(我需要使用content-editable来让这个工作吗?)

可以使用Range.selectNodeContents

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

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>
<<p> JSFiddle演示/strong>

相关文章：