javascript - 当我使用 HTML5 "doesn' 时，空格键 `button` t 在 `contenteditable` 元素中工作。我怎样才能让它工作？

Question

当我使用 HTML5 contenteditable 时，空格键在 button 元素中不起作用。但它在 div 元素中运行完美。我怎样才能让它工作？有人可以帮助我吗？

请在这里查看:https://jsfiddle.net/Issact/f6jc5th4/

HTML:

<div contenteditable="true">
This is editable and the spacebar does work in "Div" for the white-space
</div>
<button contenteditable="true">
This is editable and the spacebar does not work in "button" for the white-space
</button>

CSS:

div {
  background-color:black;
  padding:20px;
  color:#fff;
}
button {
  background-color:green;
  padding:20px;
  color:#fff;
}

Answer 1

这可能对您有帮助:

const button = document.querySelector('button[contenteditable]')

button.addEventListener('keydown', function (event) {
  if (event.code !== 'Space') {
    return
  }
  event.preventDefault()
  document.execCommand("insertText", false, ' ')
})

看这里的例子:on JSFiddle