我在处于打开状态的详细信息元素的摘要标签内有一个文本输入。目的是捕获用户输入，该输入最终将显示为详细信息元素（见下文）。但是，当用户在输入文本时按空格键时，详细信息元素会切换。我想阻止这种情况。我预计这可以在按键事件中使用 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 并手动连接空格字符，但这似乎不太优雅
您可以在以下位置观看活动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" to summary代替input
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
