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.参数和{{1}无济于事。

有没有快速的方法来实现这一目标？只需要在Firefox中工作。

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

编辑 selection.focusNode将在Chrome中按预期工作，其中不会选择selection.selectAllChildren的文字元素 - 不幸的是，在FF中存在不同的行为。

编辑：这不是this post的重复，因为我既没有处理user-select:none元素，也不关心它们;）

Answer 1

在我看来，最有效的方法是将您想要的内容移动到自己的可选div中，并选择其中的AllChildren。我在谷歌搜索，几个堆栈溢出问题和一些随机网站上尝试了这个。在每种情况下，结果都是瞬时的，完全相同的是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();

Answer 2

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

＆＃13;

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');
		    });
		});

＆＃13;

<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>

＆＃13;

Answer 3

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

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

用JavaScript

3 个答案: