html - 输入时 div 重复

Question

我的可编辑容器中有一个 div，当我按 Enter 键时，div 会重复，最终我会得到两个 div，一个在另一个的顶部。容器的 contenteditable 为 true，这可能会导致此问题。但无论如何我可以阻止这种情况

<div class="singlediv"></div>

使用CSS

.singlediv {
    border-color: rgb(155, 196, 243);
    border: dotted 1px;
    width: 100%;
    padding: 10px;
    min-height: 75px;
}

code here

Answer 1

您可以在 js 中使用如下所示的函数:-

const handleEnter=(e)=>{
if(e.keyCode===13)
{
e.preventDefault();
}
}

你的 html 将是 -

  <div contenteditable="true" onkeypress="handleEnter(event)">
        <div class="singlediv"></div>
    </div>

函数handleEnter确保防止在具有.contentEditable属性的div上按下回车按钮时的默认行为。 Enter key 的按键代码是 13。

这更像是一种黑客行为。如果您可以阻止使用内部 div，那么就这样做。