个人中心
gpt4 book ai didi

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

转载 作者：搜寻专家 更新时间：2023-10-31 21:47:38 25 4
gpt4 key购买 nike

我对 div 元素的上升高度有疑问。要查看该问题，您必须插入新元素 “legal case box”。然后你必须点击右上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/

最佳答案

观察 第一个 div 是空的，所以它的高度较小，year div 的高度比第一个 div 大，所以当点击第一个 div 时，它不会最小化，因为你的年份 div 有一些最小高度，因为文本。当您点击年份 div 时，第一个 div 为空且高度较小，因此在您输入内容之前，您的年份 div 会最小化。

如果您不想取消注释上面的行，请尝试将 height 添加到每个 div

关于javascript - 当用户点击内容 JS 时 Div 改变高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32985676/

25 4 0
文章推荐： ios - 如何使对象(SKSprite 节点)在单击时消失
文章推荐： php - 将字符串转换为日期 php
文章推荐： PHP 持久替换我的帖子值末尾的空格
文章推荐： html - 防止图片源自动加载
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com