Question

使用Chrome打开此页面（请参阅Live demo）：

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

CSS：

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

JS：

$(myspan).focus();

contenteditable span有焦点（你可以开始写东西，你会发现它已经有了焦点），但是我们没有看到＆＃34; {{1 }}＆＃34;编辑光标。

如何显示此光标？（备注：I是必需的，以及即使没有空格，跨度为空的事实。）

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

Answer 1

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

＆＃13;

$(myspan).focus();

＆＃13;

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

＆＃13;

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

＆＃13;

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">&#8203;</span>

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/

Answer 6

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

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

在：

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

希望这有帮助。

Answer 7

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

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

我再次启用了绑定和样式表。我的 div 已经设置为 display: block;，其中 min-width、min-height 和 padding 设置在最终计算样式集中。这里的其他答案都没有奏效。我在 placeholder 上确实有一个 :empty:before，这可能是罪魁祸首。我注释掉了。现在行为再次一致，就像样式表关闭一样。奇怪的是，SO 上的可运行片段使用相同的计算 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 8

添加CSS样式

min-height: 15px;

您可能还需要

display: block;

到您的contenteditable="true"代码

Answer 9

我使用Chrome，您的代码运行正常。

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

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

9 个答案:

Demo in jsFiddle