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

2021/01/30 23:21 · jquery ·  · 0评论

当您使用Chrome打开此页面(请参见Live demo)时:

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

CSS:

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

JS:

$(myspan).focus();

contenteditable span具有焦点(您可以开始写东西,你会看到,它已经有了焦点),但我们没有看到“ I”编辑光标。

如何使该光标显示?(备注:outline:0是必需的,并且跨度为空,即使没有空格也是如此)。

注意:使用Firefox时,将显示光标。

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

我在左侧添加了填充,并且出现了光标。

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

jsFiddle中的演示

.cont_edit {
  outline: 1px solid transparent;
}

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

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

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

如果将每个span设置为display: block则几乎可以正常工作,尽管仍然存在一些非常奇怪的行为,具体取决于父级中是否存在空格。修改显示内容以使其内联,使其具有浮动,内嵌块和绝对位置等技巧,使IE将每个元素视为一个单独的编辑框。相对定位的块元素彼此相邻工作,但这可能是不切实际的。


您也可以尝试添加零宽度字符,例如 &#8203;

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;

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

添加CSS样式

min-height: 15px;

您可能还需要

display: block;

到你的contenteditable="true"标签

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

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

过度:

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

希望这可以帮助。

我使用的是Chrome,并且您的代码工作正常。

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

本文地址:http://jquery.askforanswer.com/kebianjideguangbiaoweixianshizaichromezhong.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!