开始输入时将字符附加到输入字段，而无需在页面加载时输入焦点

Question

这是我的代码

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">

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

Answer 1

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

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

when the user starts typing only I need to focus on the input

您可以将 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

开始输入时将字符附加到输入字段，而无需在页面加载时输入焦点

Append character to input field when start typing without focus to input on page load

javascript

jquery

angularjs