Question

我正在尝试制作一个插入特殊类型元素的编辑器。我发现，如果将其中的元素的contenteditable设置为false，则不会在其中键入内容（这很好），但是它不会将光标放在这之前或之后，光标只会消失。

是否有一种方法可以阻止用户在元素内部键入内容，但是在单击元素时保持光标焦点，就像普通的文本符号一样？

div div {
  width: 30px;
  height: 30px;
  background: red;
  display: inline-block;
}

div {background: #ccc}

<div contenteditable="true">
this one will let you type<div></div>inside the red box
</div>

<div contenteditable="true">
this one wont, <div contenteditable="false"></div> but the cursor does nothing when you click inside it now
</div>


<div contenteditable="true">
cant place cursor after this box <div contenteditable="false"></div>
</div>

如果最后一个文本块也不能单击文本块的末尾。

可用性方面的大问题，真的很想解决此问题。

Facebook已经解决了这个问题，但我不知道它是与js还是css：

https://stackoverflow.com/a/6115923/9759362

编辑：我发现fb将caret-color属性更改为黑色，但是在您键入后，它似乎跳到了跨度之外的位置，这必须使用js完成。仍在尝试找出方法。

Answer 1

看起来readonly属性是工作的工具，并且具有可接受的支持caniuse。

[contenteditable]:read-only {
  cursor: not-allowed;
}

css-tricks的文章合法。

如何使用contentEditable使容器中的不可编辑元素？

1 个答案: