在 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是必须的，以及span即使没有空格也是空的）。

注意：在 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;
}

Demo in jsFiddle

Answer 3

.cont_edit {
  outline: 1px solid transparent;
}

Answer 4

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

来自问题Setting the caret position to an empty node inside a contentEditable element

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

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

---

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

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

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

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

Answer 5

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

---

确实，使用以下代码，<div> 的大小将是 0px x 18px ！这就解释了为什么 caret（编辑光标）会被隐藏！

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/

Answer 6

添加CSS样式

min-height: 15px;

你可能还需要

display: block;

到您的contenteditable="true" 标签

Answer 7

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

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

结束：

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

希望这会有所帮助。

Answer 8

我在 Chrome v89.0.4389.90 上遇到的问题是 contenteditable 字段有时会在 focusin 上显示闪烁的插入符号，有时不会。我注意到在聚焦之前，当字段中已有内容时，它总是闪烁。当没有内容时，有时会/不会发生行为。

起初，我认为一定有一些冲突的事件处理程序会不规律地转移焦点。我禁用了所有事件绑定和计时器。仍然是相同的不稳定行为。然后我认为这可能是一些冲突的 CSS，所以我禁用了所有样式表。至少现在行为是一致的：当字段有内容时，插入符号 100% 闪烁；当字段没有内容时，插入符号不会 100% 闪烁。

我再次启用了绑定和样式表。我的div 已经设置为display: block;，min-width、min-height 和padding 在最终计算的样式集中设置。这里没有其他答案有效。我在:empty:before 上确实有一个placeholder，这可能是罪魁祸首。我把它注释掉了。现在行为再次一致，就像样式表关闭一样。奇怪的是，SO 上的可运​​行 sn-p 与相同的计算 CSS 堆栈一起工作。我想保留placeholder，所以需要用我的实际代码库进一步研究...

我可以 100% 解决当前问题的唯一解决方案是通过创建一个空白区域并在之后立即将其删除来强制将插入符号放置在空白字段中。在调试根本原因之前，我能做的最好的解决方法是。

//force caret to blink inside masks
let force_caret = function() {
  if (!this.textContent) {
    this.textContent = ' ';
    let r = document.createRange(),
      s = window.getSelection();
    r.setStart(this.childNodes[0], 0);
    r.collapse(true);
    s.removeAllRanges();
    s.addRange(r);
    this.textContent = '';
  }
}

//binds
let els = document.querySelectorAll("[contenteditable]");
for (let i = 0; i < els.length; i++) {
  els[i].addEventListener('focusin', force_caret, false);
}

/* styles irrelevant to the issue, added for visual assist */

:root {
  --b-soft: 1px solid silver;
  --bs-in: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  --c-soft: gray;
  --lg-warm: linear-gradient(30deg, rgb(254, 250, 250), #eedddd);
}

body {
  font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
}

[contenteditable] {
  outline: initial;
}

[contenteditable][placeholder]:empty:before {
  content: attr(placeholder);
  color: var(--c-soft);
  background-color: transparent;
  font-style: italic;
  opacity: .5;
  font-size: .9em;
}

.input {
  border-bottom: var(--b-soft);
  padding: .2em .5em;
}

.input_mask {
  display: flex;
  align-items: baseline;
  color: var(--c-soft);
}

.mask {
  box-shadow: var(--bs-in);
  border-radius: .2em;
  background: var(--lg-warm);
  font-weight: 500;
  border: 1px solid transparent;
  text-transform: uppercase;
  /* styles possibly relevant to the issue according to other proposed solutions */
  margin: 0 .4em .1em .4em;
  padding: .2em .4em;
  min-width: 3em;
  min-height: 1em;
  text-align: center;
}

<div data-type="tel" data-id="phone" class="input input_mask">
  <span>+1 (</span>
  <div maxlength="3" contenteditable="true" placeholder="111" class="mask"></div>
  <span>)</span>
  <div maxlength="3" contenteditable="true" placeholder="111" class="mask"></div>
  <span>-</span>
  <div maxlength="4" contenteditable="true" placeholder="1111" class="mask"></div>
  <span>x</span>
  <div maxlength="5" contenteditable="true" class="mask"></div>
</div>

Answer 9

我使用 Chrome，您的代码运行良好。

尝试在您的 CSS 中使用 cursor: text;。见here