如何在按下回车键时使用 id 进入可编辑"p"

Question

<p contenteditable="true" spellcheck="false" id="main"></p>

我想输入"main"p，当我按回车键。JS代码:

document.addEventListener('keydown', (e) => {
if(e.code === 'Enter' || e.code === 'NumpadEnter') {
e.preventDefault();
if(document.getElementById("main").innerHTML == "sudo apt update") {
document.getElementById("main").innerHTML = "";
document.getElementById("main").innerHTML = "checking for updates...";
}
newLine();

}
});

我试着谷歌一下怎么做，但我找不到方法。

Answer 1

1. 您应该使用textContent而不是innerHTML。

2. 如果你想用不同键的事件做其他事情，在内部条件中移动preventDefault

3. 使用focus将光标移动到可编辑的段落元素。

// Cache the element
const main = document.querySelector('#main');
// Add a listener to the element
document.addEventListener('keydown', handleKey);
function handleKey(e) {
if (e.code === 'Enter' || e.code === 'NumpadEnter') {
// Prevent the event from adding a return in
// the element, `focus` on the element, and then update
// its text
if (main.textContent === 'sudo apt update') {
e.preventDefault();
main.focus();
main.textContent = 'checking for updates...';
}
}
}

<p id="main" contenteditable>sudo apt update</p>

Answer 2

要在按下enter键时进入带有主ID的p元素，可以使用focus方法:

document.addEventListener('keydown', (e) => {
if(e.code === 'Enter' || e.code === 'NumpadEnter') {
e.preventDefault();
if(document.getElementById("main").innerHTML == "sudo apt update") {
document.getElementById("main").innerHTML = "";
document.getElementById("main").innerHTML = "checking for updates...";
}
newLine();
// Focus the main element
document.getElementById("main").focus();
}
});

这将为p元素提供主ID焦点，允许用户在其中键入内容。注意，你可能还需要处理元素上的blur事件，以确保当用户在元素外部单击时，元素仍然聚焦。