按住按键触发fileLoad.click()时，如何阻止文件名输入框混入多余字符？

问题出在按住s键时，按键事件的默认行为未被阻止，导致字符被输入到文件选择窗口的文件名输入框中，同时代码还存在事件重复绑定的隐患，以下是具体修复步骤：

• 在s键的keydown事件中阻止默认行为，避免字符输入到后续激活的输入框：
  在onWindowKeyDown函数里，检测到keyCode === 83时调用event.preventDefault()。

• 触发文件选择框点击后立即重置key状态，防止后续误触发：
  调用shapeFileLoad.click()后，马上将key设为空字符串。

• 避免重复绑定change事件：
  不要每次点击都给shapeFileLoad添加change监听，初始化时只绑定一次，否则多次操作会导致processLoadedShape被重复执行。

修改后的完整代码如下：

HTML部分 #

<input type="file" id="shapeFileLoad" style="display: none;">

JavaScript部分 #

let key = '';
const shapeFileLoad = document.getElementById('shapeFileLoad');
const reader = new FileReader();

// 初始化时只绑定一次change事件
shapeFileLoad.addEventListener('change', e => {
    const f = shapeFileLoad.files[0];
    if (f) {
        reader.readAsText(f);
    }
});

reader.onload = e => {
    processLoadedShape(); // 处理数据
};

function onWindowKeyDown(event) {
    if (event.keyCode === 83) {
        key = 'shape';
        event.preventDefault(); // 阻止默认输入行为
    }
}

function onWindowKeyUp(event) {
    key = ''; // 重置状态
}

function onContainerBpointerDown(event) {
    if (key === 'shape') {
        shapeFileLoad.click();
        key = ''; // 立即重置，避免后续误触发
    }
}

注：文件选择框的文件名输入框默认值受浏览器安全限制无法通过代码修改，但阻止默认行为后输入框会保持为空，可解决多余s字符的问题。

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