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

Edit cursor not displayed on Chrome in contenteditable(编辑光标未显示在可内容编辑的Chrome上)
本文介绍了编辑光标未显示在可内容编辑的Chrome上的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

css:

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

JS:

$(myspan).focus();

contenteditablespan有焦点(您可以开始写东西,您会看到它已经有焦点),但我们看不到"I"编辑光标。

如何显示此光标?(备注:outline:0以及跨度为空,没有空白)。

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

推荐答案

解决方案是将<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上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

layui表格:设置表头居中,内容居左的实例代码:表头在属性中控制,内容直接用css样式控制 { field: 'Result', title: '结果', align: 'center', width: '60%', templet: function (d) { return 'div style="text-align:left"' + d.Result + '/div' }},
本文给大家介绍Javascript js中实现和PHP一样的时间戳格式化函数的方法,具有一定的参考借鉴价值,需要的朋友可以参考下,我们知道在php中有一个date()函数,可以方便的把时间戳格式化为时间字符串。可是在js中,我们要想实现这种效果,要写好
需求是模板字符串中不允许出现script 标签、不允许有javascript: 和 .js 文件引用,主要方法如下: clearScriptTag (str) { const reg = /script[^]*([\S\s]*?)\/script/gim; // 清除标签内 相关 xss 安全代码 const reg1 = /javascript:/gim; const reg2 = / *.js/gim; if (reg.test(str)) { str
javascript中Replace全部替换字符用法实例代码,替换1次和多次,主要是正则表达式 var r= "1\n2\n3\n";//将字母\n替换成分号alert(r.replace("\n",";"));//结果:1;2\n3\n 只替换了第一个var r= "1\n2\n3\n";//将字母\n替换成分号alert(r.replace(/\n/g, ";"));//结果:1;2;3; replac
js输出当前日期和时间的实例代码,具体实例代码如下,有兴趣的朋友可以尝试运行下。 !doctype htmlhtml lang="en" head meta charset="UTF-8" title获取当前时间/title /head body script type="text/javascript" /** *获取当前时间 *format=1精确到天 *format=2精确到秒 */ function
html页面:添加这一行 contentType: application/x-www-form-urlencoded !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" title显示小区信息/title script src="https://cdn.staticfile.org/jquery/1.10.2/jq