共计 703 个字符,预计需要花费 2 分钟才能阅读完成。
火狐浏览器下
<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
正文完
发表至: javascript
2020-08-14