开始输入时将字符附加到输入字段，而无需关注页面加载时的输入

Posted 2023-05-09

【中文标题】开始输入时将字符附加到输入字段，而无需关注页面加载时的输入

【英文标题】：Append character to input field when start typing without focus to input on page load

【发布时间】：2021-06-07 09:24:11

【问题描述】：

这是我的代码

document.addEventListener('keyup', logKey);
function logKey($event) 
  var charCode = $event.keyCode;
  if(charCode > 31 && (charCode < 48 || charCode > 57 || charCode > 107 || charCode > 219 || charCode > 221) && charCode != 40 && charCode != 32 && charCode != 38 && charCode != 41 && (charCode < 43 || charCode > 46))
      var inputElement = document.getElementById("input");
      inputElement.focus();
      inputElement.value = inputElement.value + $event.key;
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="text" id="input">

在页面加载时，如果用户开始输入，则焦点将集中在输入上，但不允许用户输入输入的字符。到目前为止，焦点正在工作，但是当用户连续输入时，它并没有按预期工作。 请帮我解决这个问题。任何帮助将不胜感激。

【问题讨论】：

如果您删除 inputElement.focus()，似乎可以正常工作（在 Firefox 中）

您要创建什么行为？在keyup 事件中附加键入的字符将复制输入 - 为什么要这样做？

@charlietfl - 焦点工作正常。但是当开始输入时，它并没有按预期工作。

@RoryMcCrossan - 我不想要重复的字符。

那么你为什么要使用这个逻辑，当这就是它所做的一切......？如果您不想复制字符，请完全删除此 JS 事件处理程序。

【参考方案1】：

问题中代码中的问题是因为您将刚刚在输入中键入的字符附加到输入中，从而有效地复制了该字符。

鉴于您在预期目标中的陈述：

当用户开始输入时，我只需要专注于输入

您可以将keypress 事件处理程序附加到document，它会在输入字符后立即将焦点设置在input：

$(document).on('keypress', e => 
  var charCode = e.keyCode;
  if (charCode > 31 && (charCode < 48 || charCode > 57 || charCode > 107 || charCode > 219 || charCode > 221) && charCode != 40 && charCode != 32 && charCode != 38 && charCode != 41 && (charCode < 43 || charCode > 46)) 
    $('#input').focus();
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input">

我还建议您检查您的 if 条件，因为 > 57 后面的 3 个条件是多余的。

 charCode > 57 || charCode > 107 || charCode > 219 || charCode > 221

【讨论】：

感谢您的回答，但是我们不能用 onKeyUp 来实现吗？

不，因为 keyup 在击键发生后触发，所以你会丢失第一个按键的值。

完美。谢谢。

您能否建议代码以删除多余的 if 逻辑？

这取决于您想要/不想捕获哪些键。我建议您对密钥代码进行一些研究，如果您遇到问题，请提出一个新问题