以编程方式选择可编辑内容的 HTML 元素中的文本？

javascript contenteditable selection

2022-08-30 04:10:20

在 JavaScript 中，可以通过编程方式选择 or 元素中的文本。您可以将输入聚焦为，然后使用 ipt.select（）选择其内容。您甚至可以使用 ipt.setSelectionRange（from，to）选择特定范围。inputtextareaipt.focus()

我的问题是：有没有办法在元素中也做到这一点？contenteditable

我发现我可以做，把脱字符号放在一个元素中，但随后的运行不起作用（也没有）。我无法在网上找到任何关于它的信息，但也许我正在寻找错误的东西......elem.focus()contenteditableelem.select()setSelectionRange

顺便说一句，如果它有任何区别，我只需要它在Google Chrome中工作，因为这是针对Chrome扩展程序的。

答案 1

如果您想在 Chrome 中选择某个元素的所有内容（内容可编辑或不可编辑），请按以下步骤操作。这也适用于Firefox，Safari 3 +，Opera 9 +（也可能是早期版本）和IE 9。您还可以创建低至角色级别的选区。您需要的API是DOM Range（当前规范为DOM Level 2，另请参阅MDN）和Selection，它被指定为新的Range规范（MDN文档）的一部分。

function selectElementContents(el) {
    var range = document.createRange();
    range.selectNodeContents(el);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}

var el = document.getElementById("foo");
selectElementContents(el);

答案 2

除了Tim Downs的答案之外，我还提出了一个即使在oldIE中也有效的解决方案：

var selectText = function() {
  var range, selection;
  if (document.body.createTextRange) {
    range = document.body.createTextRange();
    range.moveToElementText(this);
    range.select();
  } else if (window.getSelection) {
    selection = window.getSelection();
    range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }
};

document.getElementById('foo').ondblclick = selectText;

在IE 8 +，Firefox 3 +，Opera 9 +和Chrome 2 +中测试。甚至我已经把它设置为jQuery插件：

jQuery.fn.selectText = function() {
  var range, selection;
  return this.each(function() {
    if (document.body.createTextRange) {
      range = document.body.createTextRange();
      range.moveToElementText(this);
      range.select();
    } else if (window.getSelection) {
      selection = window.getSelection();
      range = document.createRange();
      range.selectNodeContents(this);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  });
};

$('#foo').on('dblclick', function() {
  $(this).selectText();
});

...以及谁被打扰了，对于所有咖啡瘾君子来说都是一样的：

jQuery.fn.selectText = ->
  @each ->
    if document.body.createTextRange
      range = document.body.createTextRange()
      range.moveToElementText @
      range.select()
    else if window.getSelection
      selection = window.getSelection()
      range = document.createRange()
      range.selectNodeContents @
      selection.removeAllRanges()
      selection.addRange range
    return

更新：

如果要选择整个页面或可编辑区域的内容（标记为），则可以通过切换到并使用以下内容来更简单地执行此操作：contentEditabledesignModedocument.execCommand

MDN有一个很好的起点和一些文档。

var selectText = function () {
  document.execCommand('selectAll', false, null);
};

（在IE6 +，Opera 9 +，Firefoy 3 +，Chrome 2 +中运行良好）http://caniuse.com/#search=execCommand