用JavaScript模拟Ctrl+A-前端问题

Mimic Ctrl+A with JavaScript(用JavaScript模拟Ctrl+A)

本文介绍了用JavaScript模拟Ctrl+A的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我希望以编程方式选择页面上的所有文本，其结果与我按组合键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元素，也不关心它们；)

推荐答案

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

这篇关于用JavaScript模拟Ctrl+A的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！