编辑光标未显示在 Chrome 上的内容可编辑中

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

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

.CSS：

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

.JS：

$(myspan).focus();

contenteditable span有焦点(你可以开始写东西，你会看到它已经有焦点了(，但我们看不到" I "编辑光标。

如何使此光标显示？ (备注：需要outline:0，以及即使没有空格，跨度也是空的(。

注意：使用火狐浏览器时，将显示光标。

问题是span是内联元素。只需将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>

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

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

在 jsFiddle 中演示

.cont_edit {
  outline: 1px solid transparent;
}

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

从问题将插入符号位置设置为内容可编辑元素内的空节点

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

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

<小时 />

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

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

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

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

解决方案是将<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;

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

我在

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

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

我再次启用了绑定和样式表。我的div已经设置为在最终计算样式集中设置了min-width、min-height和padding display: block;。这里的其他答案都不起作用。我确实对:empty:before有一个可能的罪魁祸首placeholder。我评论了一下。现在，行为再次保持一致，就像样式表已关闭一样。奇怪的是，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>

添加 CSS 样式

min-height: 15px;

您可能还需要

display: block;

到您的contenteditable="true"标签

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

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

多：

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

希望这有帮助。

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

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

在 jsFiddle 中演示

相关内容

最新更新

热门标签：