当用户点击内容时Div改变高度JS

我遇到div元素上升高度的问题。要查看该问题，您必须插入新元素“legal case box”。然后你必须点击到右上div/左上div。你可以输入1个字母，然后删除它（或者只是设置焦点并删除它） - >你可以看到div元素的上升。我不明白为什么会发生。对不起，我的英语不好。谢谢！当用户点击内容时Div改变高度JS

我也注意到，如果不做评论innerDiv1.setAttribute("data-text", "Full Name of the Case");

这问题出现在Safari浏览器中它发生。

[contentEditable=true]:empty:not(:focus):before { 
 
    content:attr(data-text) 
 
} 
 
.boxed { 
 
    margin: 5px; 
 
    border: 2px solid black; 
 
    max-width: calc(100% - 10px); 
 
} 
 

 
.inline { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    max-width: calc(100% - 10px); 
 
} 
 
.divTable { 
 
    display: table; 
 
    border-collapse: separate; 
 
    border-spacing: 5px; 
 
} 
 
.divRow { 
 
    display:table-row; 
 
} 
 
.divCell { 
 
    display:table-cell; 
 
    border: 2px solid black; 
 
}

<script> 
 
    function insert(elem) { 
 
     document.getElementById("mainDiv").focus(); 
 
     var sel = window.getSelection(); 
 
     var range = sel.getRangeAt(0); 
 

 
     range.insertNode(elem); 
 
    } 
 

 
    function legalCaseBox() { 
 
     var innerDiv1 = document.createElement('div'); 
 
     innerDiv1.contentEditable = 'true'; 
 
     innerDiv1.style.minWidth = '50pt'; 
 
     innerDiv1.style.minHeight = '50pt'; 
 
     innerDiv1.classList.add('divCell'); 
 
     //innerDiv1.setAttribute("data-text", "Full Name of the Case"); 
 

 
     var innerDiv2 = document.createElement('div'); 
 
     innerDiv2.contentEditable = 'true'; 
 
     innerDiv2.style.minWidth = '50pt'; 
 
     innerDiv2.style.minHeight = '50pt'; 
 
     innerDiv2.classList.add('divCell'); 
 
     innerDiv2.setAttribute("data-text", "Year"); 
 

 
     var firstDiv = document.createElement('div'); 
 
     firstDiv.contentEditable = 'false'; 
 
     firstDiv.classList.add('divTable'); 
 

 
     var rowDiv = document.createElement('div'); 
 
     rowDiv.classList.add('divRow'); 
 
     rowDiv.appendChild(innerDiv1); 
 
     rowDiv.appendChild(innerDiv2); 
 

 
     firstDiv.appendChild(rowDiv); 
 

 
     var secondDiv = document.createElement('div'); 
 
     secondDiv.style.minWidth = '150pt'; 
 
     secondDiv.style.minHeight = '80pt'; 
 
     secondDiv.contentEditable = 'true'; 
 
     secondDiv.classList.add('boxed'); 
 
     secondDiv.setAttribute("data-text", "Case summary"); 
 

 
     var div = document.createElement('div'); 
 
     div.contentEditable = 'false'; 
 
     div.classList.add('inline'); 
 
     div.classList.add('boxed'); 
 
     div.appendChild(firstDiv); 
 
     div.appendChild(secondDiv); 
 

 
     insert(div); 
 
    } 
 
</script> 
 
<body id="main" spellcheck="false"> 
 
    <button onclick="legalCaseBox()">legalCaseBox</button> 
 
    <div id="mainDiv" contenteditable="true"></div> 
 
</body>

http://jsfiddle.net/Lfysfz6k/3/

来源

2015-10-07 Nikita Ermolenko

创建拨弄链接 – Arun

人家让人们的生活......当SM1创建小提琴，有来的人说，使用SO代码段，那么当有人需要小提琴时.. –

我试图运行你的代码时出现错误：'IndexSizeError：未能在'选择'上执行'getRangeAt'：0不是有效索引'（Chrome 42） – arcs