javascript - 可编辑的光标未显示在Chrome中

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

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

CSS:

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

JS:

$(myspan).focus();

contenteditable span具有焦点(您可以开始写东西，并且您会看到它已经具有焦点)，但是我们看不到“I”编辑光标。

如何使此光标显示？ (备注:outline:0是必需的，以及即使没有空格也跨度为空的事实)。

注意:使用Firefox时，将显示光标。

最佳答案

问题在于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>