我目前正在做一个项目,我有一个内容可编辑的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;
}
型
1条答案
按热度按时间zvokhttg1#
1.每个浏览器都有自己的默认样式,所以你不应该依赖默认行为。
1.不需要通过JavaScript设置css样式。用你所有的css样式创建一个类,然后通过js添加这个类。
1.如果你在你的css文件中定义了一个css样式,不要在你的html中复制这个css样式。
index.html
字符串
style.css
型