关于javascript:火狐浏览器下-contenteditable-内包含不可编辑元素光标不能出现在元素后面

火狐浏览器下

<style>
.edit {
    width: 200px;
    height: 40px;
    border: 1px solid green;
}
.disEdit {
    display: inline-block;
    width: 50px;
    height: 24px;
}
</style>

<div class="edit" contentEditable="true">
     <div class="disEdit" contenteditable="false">123</div>
</div>


问题起因: 不可编辑元素无奈获取光标,并且不可编辑元素又在最初。
解决办法:如果不可编辑元素在最初,那么在不可编辑元素前面加一个不显示内容的文本节点即可。

<script>
var node = document.getElementsByClassName("disEdit")[0];    //总之想方法获取到不可编辑的dom
var parent = node.parentNode;
// 判断不可编辑的元素是不是lastChild
if(parent.children[parent.children.length - 1] === node){
    parent.appendChild(document.createTextNode('\u200b'));    //获取光标的空白节点
}
</script>


(最初须要获取#text的话,须要解决一下光标占位符,因为”456″看似是3位,实际上”456″.length = 4,所以”456″.substr(1)即可)

原文:https://zhidao.baidu.com/question/1306988232397936939.html

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理