编辑光标未在Chrome上显示,但在contenteditable中

Question

当您使用Chrome 打开此页面(请参阅实时演示)时:

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

CSS:

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

JS:

$(myspan).focus();

在contenteditable span具有焦点(您可以开始写东西,你会看到,它已经有了集中),但我们没有看到" I"编辑光标.

如何使这个光标显示？(备注:outline:0需要,以及即使没有空白,跨度为空的事实).

注意:使用Firefox时,将显示光标.

Answer 1

问题是spans是内联元素.只需添加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>

Answer 2

我在左边添加了填充,然后出现了光标.

#myspan
{
    border: 0; 
    outline: 0; 
    min-width: 100px; 
    height: 30px; 
    padding-left: 1px;
}

在jsFiddle演示

Answer 3

这仅与ContentEditable渲染空白区域的方式有关。为了证明这与焦点无关，请在可编辑的 div 中添加一些文本，然后将其删除。当最后一个字符消失时，光标将消失

从问题将插入符号位置设置为 contentEditable 元素内的空节点

选择/范围模型基于文本内容的索引，不考虑元素边界。我相信在没有文本的内联元素中设置输入焦点可能是不可能的。当然，对于您的示例，我无法通过单击或箭头键在最后一个元素内设置焦点。

如果您将每个跨度设置为display: block，它几乎可以工作，尽管仍然存在一些非常奇怪的行为，这取决于父项中空格的存在。使用浮动、内联块和绝对位置等技巧使显示看起来内联，使 IE 将每个元素视为一个单独的编辑框。彼此相邻的相对定位块元素可以工作，但这可能不切实际。

您也可以尝试添加一个零宽度字符，如 ​

document.getElementById('myspan').focus();

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

<span id="myspan" contenteditable="true">&#8203;</span>

Answer 4

.cont_edit {
  outline: 1px solid transparent;
}

Answer 5

解决方案是更改<span>为<div>（我已经看到这可以解决contenteditable其他问题中的许多问题）+ 添加一个min-width.

事实上，使用以下代码，大小<div>将是0px x 18px! 这解释了为什么插入符号（编辑光标）会被隐藏！

HTML

<div id="blah" contenteditable=true></div>

CSS

#blah {
    outline: 0;
    position: absolute;
    top:10px;
    left:10px;
}

JS

$("#blah").focus();

然后，添加

min-width: 2px;

在 CSS中将允许显示插入符号，即使使用 Chrome：http : //jsfiddle.net/38e9mkf4/2/