空格键（键码 32）充当 Enter 键，输入字段内除外答案

【问题标题】：Spacebar (keycode 32) to act as Enter key except inside an input field空格键（键码 32）充当 Enter 键，输入字段内除外
【发布时间】：2021-03-08 06:15:58
【问题描述】：

我正在努力为一个程序添加辅助功能，以供有视力障碍的用户使用。为此，我们使用 tab 键在页面中进行操作。然后，用户可以使用空格键作为回车键，例如打开他们关注的链接。我一直在使用空格键以这种方式操作（使用“e.preventDefault()”），当然在输入字段内时除外。我写了对我来说合乎逻辑但不起作用的东西。请问有人有什么建议吗？这是我在 javascript 文件中的内容：

var textFieldEntry = document.querySelectorAll('input.field-input');
if (e.key == 'Space' || e.keyCode == 32) {
  if (e.target !== textFieldEntry) {
    e.preventDefault();
    e.target.click();
  };
}

【问题讨论】：

你为什么要这样做？语义 HTML 将按预期运行，因此将 <a> 用于链接 <button> 用于按钮等。要使超链接有效，它必须具有有效的 href，这是您要克服的问题吗？
附注Enter 用于超链接，space 用于复选框等。您是否对每个项目的行为感到困惑？
我正在为要求他们的网站以这种方式行事的客户这样做。我现在正在研究是否有“preventDefault() unless”类型的编码。
改变预期行为对于可访问性来说是一个糟糕的想法，因为用户可能会按space 滚动页面，让它意外激活链接实际上会使网站更少可访问。
顺便说一句，你的代码有问题的原因是e.target 是一个项目，querySelectorAll 抓取所有项目，所以它们不匹配，看看实现一个“.hasClass”函数和检查类名而不是stackoverflow.com/questions/5085567/…

标签： javascript ruby-on-rails accessibility keycode

【解决方案1】：

请更正我这段文字，我正在使用安卓浏览器所以我需要空格键作为物理空格键使用 API，这个物理空格键本身实际上充当 Enter（从列表中选择）并在文本中添加“空格”。它就像一个交互式文本更正

var textFieldEntry = document.querySelectorAll('textarea.field-input');
$(document).on('keyup', function(e){
if (e.key == 'Space' || e.keyup == 229) {
  console.log("space pressed");
  console.log("e.target", e.target);
  console.log("textFieldEntry", textFieldEntry);
  if (e.target !== textFieldEntry) {
    e.preventDefault();
    e.target.click();
  };
}
});

【讨论】：

【解决方案2】：

不是答案，旨在向 OP 说明为什么他的功能不能按预期工作并将被删除

var textFieldEntry = document.querySelectorAll('input.field-input');
$(document).on('keydown', function(e){
if (e.key == 'Space' || e.keyCode == 32) {
  console.log("space pressed");
  console.log("e.target", e.target);
  console.log("textFieldEntry", textFieldEntry);
  if (e.target !== textFieldEntry) {
    e.preventDefault();
    e.target.click();
  };
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="field-input"/>
<input class="field-input"/>
<input class="field-input"/>

【讨论】：

将其设为社区 Wiki，以便人们可以使用它，一旦 OP 响应将删除它
明白了！谢谢！
哦，现在你接受了，我不能删除它：-P 哦，好吧，很高兴它有帮助！