在Chrome中移动时，内部div的可编辑内容表现不佳

nsc4cvqm 于 2023-08-01 发布在 Go

关注(0)|答案(1)|浏览(106)

我目前正在做一个项目，我有一个内容可编辑的div与内部HTML元素，如内部div。在chrome中，我在某种情况下得到了奇怪的行为，这在Firefox中表现良好。在这个例子中，我有一个可编辑的内容，里面有一个嵌套的div，我把它涂成红色：
Content Editable Div before editing
现在，如果我导航到第一行的末尾并按下（前进）delete，预期的行为将是整个第二行将推到第一行的末尾。在Firefox中，这就是发生的事情。但是，在Chrome中，会发生这种情况：
Content Editable Div after editing的
我在下面提供了代码。在本例中，按下分号将在当前窗口选择中放置红色div。如果您放置红色内部div并继续键入，它将消失，因此在放置红色div后，请使用鼠标单击可编辑内容中的其他位置。

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="container">
        <div id="editor" contenteditable="true" style="display:inline-block"><div><br></div></div>
    </div>
    <script>
        document.getElementById("editor").addEventListener("keydown", (e) => {
            if (e.key === ";") {
                e.preventDefault();
                let range = window.getSelection().getRangeAt(0);
                range.collapse(false);

                let div = document.createElement("span");
                div.contentEditable = false;
                div.style.height = "27px";
                div.style.width = "27px";
                div.style.backgroundColor = "red";
                div.style.display = "inline-block";

                range.insertNode(div);
            }
        })
    </script>
</body>

字符串
这里是style.css

body {
    margin:0px;
    padding:0px;
    overflow-y:hidden;
}

#container {
    width:fit-content;
    height:80vh;
    padding:0px;
    margin:auto;
    margin-top:10vh;
    background-color:rgb(190, 190, 190);
}

#editor {
    width:calc(80vw - 20px);
    height:100%;
    padding:0px;
    margin:0px;
    background-color:rgb(221, 221, 221);
    font-size:24px;
    word-wrap: break-word;
    overflow-y:hidden;
    display:inline-block;
    border:none;
    outline: 0px solid transparent;
}

型

google-chrome

来源：https://stackoverflow.com/questions/76708924/content-editable-with-inner-divs-behave-poorly-when-moved-in-chrome

1条答案

按热度按时间

zvokhttg1#

1.每个浏览器都有自己的默认样式，所以你不应该依赖默认行为。
1.不需要通过JavaScript设置css样式。用你所有的css样式创建一个类，然后通过js添加这个类。
1.如果你在你的css文件中定义了一个css样式，不要在你的html中复制这个css样式。

index.html

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="container">
        <div id="editor" contenteditable="true">
            <div><br /></div>
        </div>
    </div>
    <script>
        document.getElementById("editor").addEventListener("keydown", (e) => {
            if (e.key === ";") {
                e.preventDefault();

                let range = window.getSelection().getRangeAt(0);
                range.collapse(false);

                let div = document.createElement("span");
                div.classList.add("red-block-spacer");

                range.insertNode(div);
            }
        });
    </script>
</body>

字符串

style.css

body {
    margin:0px;
    padding:0px;
    overflow-y:hidden;
}

#container {
    width:fit-content;
    height:80vh;
    padding:0px;
    margin:auto;
    margin-top:10vh;
    background-color:rgb(190, 190, 190);
}

#editor {
    width:calc(80vw - 20px);
    height:100%;
    padding:0px;
    margin:0px;
    background-color:rgb(221, 221, 221);
    font-size:24px;
    word-wrap: break-word;
    overflow-y:hidden;
    display:inline-block;
    border:none;
    outline: 0px solid transparent;
}

#editor > div,
#editor > span {
  display: inline-block;
}

.red-block-spacer {
  display: inline-block;
  height: 27px;
  width: 27px;
  background-color: red;
}

型

赞(0）回复(0）举报 2023-08-01

我来回答

在Chrome中移动时，内部div的可编辑内容表现不佳

1条答案

相关问题

热门标签

最新问答