Question

我需要这样做才能使contenteditable div中的某些元素无法选择，这样如果用户试图将插入符移动到原来的位置，用户就会跳过它们。

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

＆＃13;

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

＆＃13;

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

＆＃13;

有没有办法让它在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>

Chrome似乎忽略了在可信任的div中的用户选择

1 个答案: