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

Edit cursor not displayed on Chrome in contenteditable

提问by Basj

When you open this page (see Live demo) with Chrome :

当您使用 Chrome打开此页面（请参阅现场演示）时：

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

CSS :

CSS :

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

JS :

JS：

$(myspan).focus();

the contenteditablespanhas focus (you can start to write things and you will see that it already had focus), but we don't see the "I" edit cursor.

在contenteditablespan具有焦点（您可以开始写东西，你会看到，它已经有了焦点），但我们没有看到“ I”编辑光标。

How to make that this cursor is displayed ?(Remark : outline:0is needed, as well as the fact that the span is empty even with no white space).

如何使这个光标显示？（备注 :outline:0是必需的，并且即使没有空格，span 也是空的）。

Note : With Firefox, the cursor is displayed.

注意：使用 Firefox，会显示光标。

采纳答案by Basj

The solution was to change <span>to <div>(I've seen that this solves many contenteditableproblems in other questions here and there) + to add a min-width.

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

---

---

Indeed, with the following code, the size of the <div>would be 0px x 18px! That explains why the caret(edit cursor) would be hidden !

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

HTML

HTML

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

CSS

CSS

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

JS

JS

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

---

---

Then, adding

然后，添加

min-width: 2px;

in the CSS will allow the caretto be displayed, even with Chrome : http://jsfiddle.net/38e9mkf4/2/

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

回答by imtheman

The problem is that spans are inline elements. Just add display:block;to your CSS and it will fix the problem.

问题是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>

回答by Luke

I added padding to the left and the cursor appears.

我在左边添加了填充，然后出现了光标。

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

Demo in jsFiddle

jsFiddle 中的演示

回答by Aleksey Dubinskiy

.cont_edit {
  outline: 1px solid transparent;
}

回答by KyleMit

This just has to do with the way an empty ContentEditablearea is rendered. To prove it's not about the focus, add some text to your editable div, and then delete it. When the last character is gone, the cursor will disappear

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

From the question Setting the caret position to an empty node inside a contentEditable element

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

The selection/range model is based around indexes into text content, disregarding element boundaries. I believe it may be impossible to set the input focus inside an inline element with no text in it. Certainly with your example I cannot set focus inside the last element by clicking or arrow keys.

It almost works if you set each span to display: block, though there's still some highly strange behaviour, dependent on the existence of whitespace in the parent. Hacking the display to look inline with tricks like float, inline-block and absolute position make IE treat each element as a separate editing box. Relative-positioned block elements next to each other work, but that's probably impractical.

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

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

---

---

You could also try adding a zero-width character like ​

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

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

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

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

回答by jsbisht

For me setting it content of contenteditable div to <br>works. I tried setting it to nbsp;but that creates extra character space in the div before i start editing. So, i choose this:

对我来说，将 contenteditable div 的内容设置为<br>有效。我尝试将其设置为，nbsp;但这会在我开始编辑之前在 div 中创建额外的字符空间。所以，我选择这个：

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

over:

超过：

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

Hope this helps.

希望这可以帮助。

回答by Serj Sagan

Add a CSS style of

添加一个 CSS 样式

min-height: 15px;

you may also need

你可能还需要

display: block;

to your contenteditable="true"tag

到你的contenteditable="true"标签

回答by PreFiXAUT

I use Chrome and your Code works fine.

我使用 Chrome，你的代码工作正常。

Try to use cursor: text;in your CSS. See here

尝试cursor: text;在您的 CSS 中使用。看这里