javascript - 在 contenteditable 中编辑光标未显示在 Chrome 上

Question

当您使用 Chrome 打开此页面(参见 Live demo)时:

<span id="myspan" contenteditable=true></span>

CSS:

#myspan { border: 0; outline: 0;}

JS:

$(myspan).focus();

contenteditable span 有焦点(你可以开始写东西，你会看到它已经有焦点了)，但是我们没有看到“I"编辑光标。

如何让这个光标显示出来？(备注:outline:0 是必需的，而且跨度是空的，即使没有空格).

注意:对于 Firefox，会显示光标。

Answer 1

问题是 span 是内联元素。只需将 display:block; 添加到您的 CSS 即可解决问题。

$(myspan).focus();

#myspan {
    border: 0;
    outline: 0;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="myspan" contenteditable=true></span>