Chrome 似乎在 contenteditable div 中忽略了 user-select

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 规则。这些元素将不再 selectable。

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

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

使用 contenteditable="false" 的解决方案示例（不在包装器 divs 上）。

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

Chrome 似乎在 contenteditable div 中忽略了 user-select

Chrome appears to ignore user-select in a contenteditable div

html

css

cross-browser

contenteditable