用户单击内容JS时div更改高度答案

【问题标题】：Div change height when user click content JS用户单击内容JS时div更改高度
【发布时间】：2015-10-07 23:17:03
【问题描述】：

我遇到了 div 元素高度升高的问题。要查看该问题，您必须插入新元素 “法律案例框”。然后你必须点击右上角的div / 左上角的div。您可以键入 1 个字母，然后将其删除（或仅设置焦点并删除它）-> 您可以看到 div 元素的上升。我不明白为什么会这样。对不起，我的英语不好。谢谢！

我还注意到，如果不评论 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/

【问题讨论】：

People let people Live... 当 sm1 创建 fiddle 时，有人说使用 SO Code sn-p，完成后有人需要 fiddle..
尝试运行您的代码时出现错误：“IndexSizeError: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index” (Chrome 42)
我收到 Uncaught IndexSizeError: Failed to execute 'getRangeAt' on 'Selection': 0 不是一个有效的索引。错误
@Arun 我添加了焦点功能，现在试试 :)

标签： javascript html css

【解决方案1】：

观察第一个 div 是空的，所以它的高度更小，year div 的高度比第一个 div 高一些，所以当点击第一个 div 时，它不会被最小化，因为年 div 由于文本而具有一些最小高度。当您单击 year div 时，第一个 div 是空的并且高度较小，因此在您输入某些内容之前，您的 year div 将被最小化。

如果您不想取消注释上述行，请尝试在每个 div 中添加 height

【讨论】：

感谢您的回答！我不想取消注释该行，但我也不想拥有 div 元素的静态高度。我想动态改变高度。你能帮助我吗？我真的不知道如何解决这个问题。
只需将高度添加到 .divTable 。喜欢this。输入一些数据，看看，div的高度发生了变化。如果这有帮助，那么我会更新我的帖子
我可以点击第二个 div 然后点击另一个区域然后再次点击第二个 div。我看到高度很大的空 div。对不起我的愚蠢，但我真的不明白:(
这是预期的。以及你真正想要达到的目标？
如您所见，当我单击第一个 div（左上 div）然后单击另一个区域时，div 不会上升，但在这种情况下第二个 div（右上角）会上升。它们之间的区别是“占位符”（innerDiv1.setAttribute("data-text", "Full Name of the Case")）。因此，当我像第一个 div 一样设置焦点打开/关闭它时，我希望第二个 div 不会上升。我希望你明白我想要什么。