javascript - 输入空格键和制表符的按键问题

Question

所以我的应用程序中有一些表单，除了其中一个之外，它们似乎都工作得很好。

当我按空格键或 Tab 时，就像我有一个阻止默认值一样，它不会执行任何操作。

我尝试使用控制台的代码getEventListeners(node)，它恢复正常。我还尝试使用 eventListener 来查看输入是否得到某些内容

let input = document.querySelector('#input')
input.addEventListener('keydown', e => {
  console.log(e.which);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" id="input" name="label" placeholder="Label" class="d-block w-100 mb-3 watch">
  <textarea name="comentario" placeholder="Deixe um comentário" class="d-block w-100 mb-3 watch"></textarea>
  <button class="btn btn-primary">Ok</button>
</form>

当我按空格键或选项卡时，控制台打印键码很好，但它们没有达到预期的效果。

这个应用程序是一个大型元素，可能会有一些代码干扰我的输入，但我已经检查了我能想到的所有可能性，所以如果有人有任何建议，他们将受到欢迎。

我仅使用 JavaScript、HTML 和 CSS。 库:jQuery、SVG.js、Pizzicato.js、Tuna.js、Wavesurfer.js

Answer 1

正如我在评论中提到的，我没有在测试中投入太多精力，但这个解决方案可以向您展示成为所需的摇滚明星的道路。

https://jsfiddle.net/h3o9x5nw/1/

您可以在 codes 数组中添加要测试的代码，以便行为可以继续，而不会破坏用户体验。如果您需要测试可能的 key 代码，而又不失去理智尝试通过在线表格查找某些内容，则可以使用 https://keycode.info/在 JS 中查找您的 keyCodes。

document.querySelector('#comentarios').addEventListener('keydown', e => {
            if (e.which == 32){
                e.preventDefault();
                e.path[0].value += String.fromCharCode(e.keyCode);
            }
        })

或

document.querySelector('#comentarios').addEventListener('keydown', e => {
            if (e.which != 32) return;

            e.preventDefault();
            e.path[0].value += String.fromCharCode(e.keyCode);

        })