用 JavaScript 模拟 Ctrl+A

Question

我想以编程方式选择页面上的所有文本，其结果与按下组合键 Ctrl+A 完全相同.

使用document.getSelection().selectAllChildren(body) 的问题在于，选择还将包括用户无法选择的文本节点，即<script> </script> 或在CSS 中定义了user-select:none 的节点：

<div style="-moz-user-select:none">将被选中</div>

在选择对象上有一个方法modify，可以像这样使用： selection.modify("extend", "forward", "documentboundary"); 将选择从文档的开头扩展到其结尾，这将忽略任何脚本或样式元素的内容和带有-moz-user-select:none 的元素 - 不幸的是，Firefox 不允许将documentboundary 作为 3. 参数和word 并没有多大帮助。

有没有快速的方法来完成这个？ 只需要在 Firefox 中工作。

编辑（不太好的解决方案）：选择第一个文本节点，然后重复使用selection.modify('extend', 'forward', 'line')，而selection.focusNode 不等于最后一个文本节点 - 但取决于长度这需要几秒钟的时间！

编辑： selection.selectAllChildren 将在 Chrome 中按预期工作，其中带有 user-select:none 的文本元素将不会被选择 - 不幸的是，FF 中有不同的行为。

编辑：这不是 this post 的重复，因为我既不处理 contenteditable 元素，也不关心它们；）

Answer 1

请注意，我在这里使用了 jquery，尽管它是用 Javascript 询问的 - 我不确定这是否正是您要寻找的，但也许它可以为您指明正确的方向？如果您需要解释，请告诉我。

function slct(el) {
		    var d = document;
		    var t = d.getElementById(el);
        var selection;
		    var range;
    
		    if(d.body.createTextRange) {
		        range = d.body.createTextRange();
		        range.moveToElementText(t);
		        range.select();
		    } else if(window.getSelection) {
		        selection = window.getSelection();        
		        range = d.createRange();
		        range.selectNodeContents(t);
		        selection.removeAllRanges();
		        selection.addRange(range);
		    }
		}

		$(function() {
		    $('#myButton').click(function() {
		        slct('content');
		    });
		});

<script
		src="https://code.jquery.com/jquery-3.2.1.min.js"
		integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
		crossorigin="anonymous">
	</script>

<div id="content">
		<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam  necessitatibus assumenda nam obcaecati unde libero aspernatur neque ad vel enim tempora, qui consectetur corporis reiciendis, eum dolorum voluptas soluta voluptatibus!</h1>
		<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet asperiores, iste distinctio sint quidem ea aut voluptatem earum error similique, repudiandae consectetur labore esse. Aut quas repudiandae accusamus non iusto.</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In rem blanditiis delectus placeat officia, iusto qui! Dicta laboriosam ea exercitationem, molestiae officiis! Asperiores quibusdam laborum in optio eum, similique vitae.</p>
</div>

<button id="myButton">select stuff</button>

Answer 2

我认为您可以为此使用document.execCommand('selectAll', false, null)。

您可以在此here 上找到更多文档。

Answer 3

在我看来，最有效的方法是将您想要选择的内容移动到它自己的可选 div 中，然后选择其中的 selectAllChildren。我在谷歌搜索、几个堆栈溢出问题和一些随机站点上试过这个。在每种情况下，结果都是即时的，并且完全相同具有ctrl+A。

function selectAll() {
  var sel = window.getSelection();
  var body = document.querySelector("body");
  // Place the children in an array so that we can use the filter method
  var children = Array.prototype.slice.call(body.children);

  // Create the selectable div
  var selectable = document.createElement("div");

  // Style the selectable div so that it doesn't break the flow of a website.

  selectable.style.width = '100%';
  selectable.style.height = '100%';
  selectable.margin = 0;
  selectable.padding = 0;
  selectable.position = 'absolute';

  // Add the selectable element to the body
  body.appendChild(selectable);

  // Filter the children so that we only move what we want to select.
  children = children.filter(function(e) {
    var s = getComputedStyle(e);
    return s.getPropertyValue('user-select') != 'none' && e.tagName != 'SCRIPT'
  });
  // Add each child to the selectable div
  for (var i = 0; i < children.length; i++) {
        selectable.appendChild(children[i]);
  }

  // Select the children of the selectable div
  sel.selectAllChildren(selectable);

}

selectAll();