html - Chrome 似乎忽略了 contenteditable div 中的用户选择

Question

我需要这样做，以便 contenteditable div 中的某些元素不可选择，以便用户在尝试将插入符移动到它们所在的位置时将跳过它们。

显而易见的解决方案似乎是使用 user-select: none 来设置这些部分的样式。这在 Firefox 中运行良好，但不幸的是，在 Google Chrome 中完全失败。

.ok {
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}

.nope {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

<div contenteditable="true" readonly>
  <span class="ok">One</span><span class="nope">Two</span><span class="ok">Three</span>
  <div class="nope">
    <span class="ok">One</span><span class="nope">Two</span><span class="ok">Three</span>
  </div>
  <span class="nope">One</span><span class="ok">Two</span><span class="nope">Three</span>
  <div class="nope">
    <span class="nope">One</span><span class="ok">Two</span><span class="nope">Three</span>
  </div>
</div>

有没有什么方法可以让它在 Chrome 中也能正常工作，或者这是一个无法克服的限制？

Answer 1

我也遇到过这个问题，并且找到了一个不错的解决方法。它并不漂亮，但通常可以完成工作。

如果您添加 contenteditable="false" 和 user-select:none;，Chrome 将正确处理 CSS 规则。这些元素将不再可选。

这样做的主要缺点(除了必须修改 HTML 之外)是如果在包装器 div 上添加 contenteditable="false" 那么它的所有子元素也将变得不可编辑。您可以进一步嵌套另一个contenteditable="true"，这将允许嵌套内容可编辑，但不能从嵌套内容中选择外部内容。

最终，在启用 contenteditable 时在 Chrome 中正确实现 CSS 规则将是最佳解决方案。 (由于用户选择规范可能是故意的，请参阅下面的评论)

使用 contenteditable="false" 的解决方案示例(不在包装 div 上)。

.ok {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.nope {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<div contenteditable="true" readonly>
  <span class="ok">One</span>
  <span class="nope" contenteditable="false">Two</span>
  <span class="ok">Three</span>
  <div>
    <span class="ok">One</span>
    <span class="nope" contenteditable="false">Two</span>
    <span class="ok">Three</span>
  </div>
  <span class="nope" contenteditable="false">One</span>
  <span class="ok">Two</span>
  <span class="nope" contenteditable="false">Three</span>
  <div>
    <span class="nope" contenteditable="false">One</span>
    <span class="ok">Two</span>
    <span class="nope" contenteditable="false">Three</span>
  </div>
</div>