当摘要具有嵌入式文本输入并且用户按下空格键时，如何防止html details元素切换

Question

我在处于打开状态的details元素的summary标记内有一个文本输入。目的是捕获用户输入，这些输入最终将显示为详细信息元素（请参见下文）。但是，当用户在输入文本时按下空格键时，细节元素会切换。我想防止这种情况。我希望可以通过在keypress事件中使用stopPropagation来完成此操作，但是它似乎没有用。如何防止元素切换？

window.onload = function() {
  var summary = document.getElementById("x");
  var fn = function(e) {
    e.stopPropagation();
    /*if(e.keyCode == 32){
      e.preventDefault();
      e.target.value += " "
    } */
  };
  summary.onkeypress = fn;
  //summary.onkeydown = fn;
};

<details open>
  <summary><input id="x" type="text" /></summary>
  Some content
</details>

我需要在React组件中执行此操作，但是为了简单起见，我在此处发布了一个js / html示例。

一种替代方法是在输入空格时使用preventDefault onkeypress并手动将空格char串联起来，但这似乎不太好

Answer 1

您可以捕获summary对象上的事件，然后preventDefault()不会切换details元素状态，也不会阻止空间添加。

window.onload = function() {
  var summary = document.getElementById("x");
  var fn = function(e) {      
    if(e.keyCode == 32){
      e.preventDefault();
    }
  };
  summary.onkeyup = fn;
};

<details open>
  <summary id="x"><input  type="text" /></summary>
  Some content
</details>

注意我移动id="x"到summary而不是input