javascript 用户可以使用密钥退出contenteditable吗？

c7rzv4ha 于 2023-01-07 发布在 Java

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

我当前有一个内容可编辑容器，它允许用户在一个范围内更改文本。我想使它在用户按Enter键后关闭内容可编辑容器。

container.addEventListener('click', (event) => {
            if (event.target.classList.contains('targetSpan')){
                document.removeEventListener('keydown', keyDownEvents);
                document.addEventListener('keydown', (event) =>{
                    if (event.key === 'Enter'){
                        document.addEventListener("keydown", keyDownEvents);
                       //function to also close contenteditable container
                    }
                });
            }
        });

我当前有一个事件侦听器，单击具有contenteditable属性的span时会删除该侦听器。我希望在用户单击Enter键时重新添加该事件侦听器。但是，我还希望关闭contenteditable容器

JavaScript

来源：https://stackoverflow.com/questions/75036068/can-a-user-exit-a-contenteditable-with-a-key

1条答案

按热度按时间

avwztpqn1#

这可能对你有用。

var container = document.getElementById("container");

container.addEventListener('click', (event) => {
  if (event.target.classList.contains('targetSpan')){
    container.setAttribute('contenteditable',true);
    container.addEventListener('keydown', checkKey);
  }
});

container.addEventListener('blur',(event) => {
    container.removeEventListener('keydown',checkKey)
});

function checkKey(e) {
  if(e.key === 'Enter') {
    container.blur();
  }
}

<span class="targetSpan" contenteditable="true" id="container">I'm a dummy text, edit me</span>

- 编辑**

如果你不需要click事件和.targetSpan类检查，你可以这样做来缩短你的代码。

var container = document.getElementById("container");

container.addEventListener('keydown', checkKey);

function checkKey(e) {
  if(e.key === 'Enter') {
    container.blur();
  }
}

在这种情况下，不需要检查click事件并在其中附加keydown。contenteditable=true让您在元素中输入内容。keydown事件侦听器保持原样，以防您在某个时候需要删除它。

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

我来回答

javascript 用户可以使用密钥退出contenteditable吗？

1条答案

相关问题

热门标签

最新问答