Firefox中按钮内contenteditable span无法输入空格的解决方案求助

问题场景 #

开发适配Chrome和Firefox的浏览器扩展，需实现按钮内文本动态修改功能。采用contenteditable的span元素方案后，Chrome 110.0中功能正常，但Firefox 110.0里无法向该span输入空格。

原代码 #

<!-- 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中按钮会默认拦截空格事件（空格会触发按钮点击行为），导致内部contenteditable span无法接收空格输入，可通过以下两种方式解决：

方案一：阻止按钮的空格默认行为 #

给按钮添加keydown事件监听器，检测到空格键时阻止默认行为，让事件传递到内部span：

// 在原有JS代码中添加
editableBtn.addEventListener('keydown', (event) => {
  if (event.key === ' ') {
    event.preventDefault();
  }
});

方案二：给span设置tabindex并主动获取焦点 #

让span成为可聚焦元素，确保空格输入直接作用于span：

1. 修改HTML中的span，添加tabindex="0"：

<span id="titleText" contenteditable="false" tabindex="0" style="border: solid; border-color: green;">Button</span>

2. 在激活编辑模式时，让span主动获取焦点：

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

两种方案均可解决问题，方案一更贴合原有交互逻辑，推荐优先使用。

内容的提问来源于stack exchange，提问作者healthyCoder