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

Posted 2023-03-06

【中文标题】在 contenteditable 中，Chrome 上未显示编辑光标

【英文标题】：Edit cursor not displayed on Chrome in contenteditable

【发布时间】：2014-11-11 22:06:51

【问题描述】：

当您使用 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 中，光标会显示出来。

【问题讨论】：

尝试指定最小宽度和最小高度。空跨度的渲染宽度和高度为零，因此不能真正将鼠标悬停在上面。通过强制它具有几个像素的大小，有一些东西可以鼠标悬停。

也许这个来自另一个问题的答案可能会对您有所帮助：[***.com/a/6249440/3298029][1] [1]: ***.com/a/6249440/3298029

@WoodrowBarlow 请参见此处：jsfiddle.net/gs3p1a6r/4 或 jsfiddle.net/gs3p1a6r/4/embedded/result，仍然会产生错误。已聚焦，但未显示光标

我明白了，我以为你指的是鼠标光标，但你指的是闪烁的东西。看起来 Doctus 解决了它。

【参考方案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>

【讨论】：

或者display:inline-block;

@avee inline-block 无法解决 Chrome 中的问题。

这很奇怪，我在 Chrome 版本 51.0.2704.103（64 位）中运行良好。也许是因为我也使用了 Bootstrap？使用block 实际上使span 的行为类似于div。

再解释一下：这是因为内联元素折叠到0 宽度而没有内容，而块元素默认为100% 宽度。这就是为什么inline-block 元素也会受到相同问题的影响。

问题不在于span 是inline，而在于inline 元素如果没有任何内容，其宽度为0。所以解决方案是确保元素有一定的宽度，恰好添加display: block;。

【参考方案2】：

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

#myspan

    border: 0; 
    outline: 0; 
    min-width: 100px; 
    height: 30px; 
    padding-left: 1px;

Demo in jsFiddle

【讨论】：

可能是因为空 span 的宽度为 0。如果光标需要出现在元素 inside 中，那么除非你给它某种填充，否则它根本没有空间可以这样做。至少这只是一个猜测

我又玩了一个，添加display: block并删除其他添加也可以：jsfiddle.net/gs3p1a6r/10 看起来没有内容的内联元素不受min-width的影响？

【参考方案3】：

.cont_edit 
  outline: 1px solid transparent;

【讨论】：

你能提供一个 jsfiddle 或者把答案变成一个代码 sn-p 吗？对日后参考有用。 ps：我不是投反对票的人！

不得不使用这个并显示：block plus 使两个属性都成为 !important 因为我页面上的其他 css 冲突

【参考方案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>

【参考方案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/

【参考方案6】：

添加CSS样式

min-height: 15px;

你可能还需要

display: block;

到您的contenteditable="true" 标签

【参考方案7】：

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

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

结束：

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

希望这会有所帮助。

【参考方案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>

【参考方案9】：

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

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

【讨论】：

CSS中的Cursor指的是鼠标光标，不一定在span占据的区域。我也使用 chrome，但演示不起作用

他只是想看到光标出现。他可以在键入时将其附加到正文中，并在他单击页面的另一部分时侦听点击以检测并再次将其从正文中删除。