Append 字符在开始输入时输入字段，而没有焦点在页面加载时输入

Question

Here is my code

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

On page load, if the user starts typing the focus is focusing the input but it's not allowing the user to enter the characters typed. As of now, the focus is working but it's not working as expected when the user typing continuously. Please help me out on this. Any help will be appreciated.

Answer 1

The issue in the code in the question is because you're appending the character which was just typed in the input back in to the input, effectively duplicating that character.

Given your statement in the comments of your intended goal:

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

You can attach a keypress event handler to the document which sets focus on the input as soon as a character is typed:

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

I would also suggest you review your if condition, as the 3 conditions following > 57 are redundant.

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