如何在document.execCommand（'justifyRight'）之后删除contentEditable上的奇怪选择？

Question

问题

执行命令后出现奇怪的静态或闪烁选择

document.execCommand('justifyRight', false, null)

和 重新选择 内容可编辑的内容或其中的某些部分。

要复制

1. 使用文本创建contentEditable元素
2. 在其上执行document.execCommand('justifyRight', false, null)
3. 尝试几次在contentEditable上选择一些文本片段，以查看contentEditable右侧的工件

let button = document.getElementById('button');
button.onclick = function onAlignRight() {
 document.execCommand('justifyRight', false, null);
}

#input {
  background: #fff;
  padding: 0 40px;
  margin-bottom: 15px;
}

#button {
  user-select: none;
  background: #000;
  color: #fff;
  display: inline-block;
  padding: 10px;
}

<div id="input" contentEditable="true">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley 
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

<div id="button">
Align right
</div>

Answer 1

范围和选择

那条奇怪的闪烁线看起来像 range 。以下演示使用 Range 和 Selection API以及 .focus() 方法。

---

演示

演示中评论的详细信息
注意：在#input中，我添加了<div>。这样做的目的是代表用户输入的内容，这些内容包装在<div>中。 #input中的文本通常不是直接的子节点。

let l = document.getElementById('left');
let r = document.getElementById('right');
let input = document.getElementById('input');

r.onclick = function(e) {
  // If not initially focused on input, it will fail
  input.focus();
  document.execCommand('justifyRight', false, null);
  /* Determines and sets caret position and narrows
  selection down to caret position*/
  setCaret();
}

l.onclick = function(e) {
  input.focus();
  document.execCommand('justifyLeft', false, null);
  setCaret();
}

function setCaret() {
  // Get selected area
  let sel = window.getSelection();
  // Get the number of chars on line caret is on
  let col = sel.focusOffset;
  // Get index number of div caret is on
  let row = sel.focusNode;
  // Make a range object representing the selection of text
  let rng = document.createRange();
  // Set the div range is on
  rng.selectNode(row);
  // Set the char position
  rng.setStart(row, col);
  // Set the range to the length of 1
  rng.collapse(true);
  // Clear any and all ranges
  sel.removeAllRanges();
  // Add the new range 
  sel.addRange(rng);
}

#input {
  background: #fff;
  padding: 0 40px;
  margin-bottom: 15px;
}

button {
  user-select: none;
  background: #000;
  color: #fff;
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}

<section id="input" contentEditable="true">
  <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley centuries, but also the leap into electronic typesetting,
    remaining essentially unchanged.</div>
  <div>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</section>
<button id="left">
  Align left
</button>
<button id="right">
  Align right
</button>