无法在 Firefox 中的按钮内将空格输入跨度

Question

我有一个按钮元素，它需要有可以动态修改的文本。我在添加空格时遇到了麻烦，当时我引用了 this answer 有一个跨度，这是可以满足的。在这段时间里，我在 Chrome 上进行测试，它可以正常工作。

但是，当我在 Firefox 中测试此功能时，我无法在 span 元素中插入空格。我也没有在网上看到任何关于此的内容。无论如何，我也可以在 Firefox 上支持这个吗？

我还应该注意，我这样做是为了我正在为 Chrome 和 Firefox 构建的扩展。

这就是我的代码的样子：

<!-- HTML -->
<button id="editableBtn">
  <span id="titleText" contenteditable="false" style="border: solid; border-color: green;">Button</span>
</button>
<button id="editorBtn">Click me to edit</button>

<!-- JS -->
<script>
  var spanText = document.getElementById("titleText");
  var editableBtn = document.getElementById("editableBtn");
  var editorBtn = document.getElementById("editorBtn");

  spanText.addEventListener('keydown', (event) => {
    console.log("Span keydown = ", event)
  })

  editorBtn.addEventListener('click', (event) => {
    spanText.contentEditable = "true"
  })

</script>

Firefox 版本：110.0

谷歌浏览器版本：110.0

Answer 1

您可以为“keydown”事件的 span 元素添加一个事件侦听器，因此当按下空格键时，它会使用

 在当前光标位置手动插入一个不间断的空格字符（显示为空格） document.execCommand

功能。

var spanText = document.getElementById("titleText");
var editableBtn = document.getElementById("editableBtn");
var editorBtn = document.getElementById("editorBtn");

spanText.addEventListener('keydown', (event) => {
  if (event.keyCode === 32) { // 32 is the keycode for the spacebar
    // prevent default behavior, since we're handling it ourselves
    event.preventDefault();
    // insert the space character at the current cursor position
    document.execCommand('insertHTML', false, ' ');
  }
});

editorBtn.addEventListener('click', (event) => {
  spanText.contentEditable = "true"
});

<button id="editableBtn">
  <span id="titleText" contenteditable="false" style="border: solid; border-color: green;">Button</span>
</button>
<button id="editorBtn">Click me to edit</button>