The content ditable in the Firefox browser contains uneditable elements, and the cursor cannot appear after the element

Time:2020-9-28

Under the Firefox browser

<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>

The content ditable in the Firefox browser contains uneditable elements, and the cursor cannot appear after the element
Cause of the problem: the cursor cannot be obtained for the non editable element, and the uneditable element is at the end.
Solution: if the uneditable element is at the end, add a text node that does not display the content after the uneditable element.

<script>
var node =  document.getElementsByClassName ("disedit") [0]; // in a word, find a way to get an uneditable dom
var parent = node.parentNode;
//Determine whether the non - editable element is lastchild
if(parent.children[parent.children.length - 1] === node){
    parent.appendChild ( document.createTextNode ('\ u200b'); // gets the blank node of the cursor
}
</script>

The content ditable in the Firefox browser contains uneditable elements, and the cursor cannot appear after the element
(if you need to get ා text finally, you need to process the cursor placeholder, because “456” seems to be 3-bit, but actually “456”. Length = 4, so “456”. Substr (1) is OK.)

Original text:https://zhidao.baidu.com/question/1306988232397936939.html

Recommended Today

Dida travel cloud provides rich public travel for tens of millions of users

Alicloud Help Center – Alibaba cloud, a leading cloud computing service provider Company profile Our company is Hangzhou Jintong Technology Group Co., Ltd., established in 2009. Our company’s business is engaged in the development and application of public transportation intelligent management system, and is the world’s leading public bicycle system (Hangzhou public bicycle system) builder […]