test.html

<div>
  <span>A</span>
  <input type="text" id="inputWithKeyboard">
</div>

<div>
    <span>B</span>
  <input id="inputWithoutKeyboard" type="text" readonly autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
</div>

<style>
  input {
  font-size: 32px;
}
</style>

<script>
  const code = document.getElementById("inputWithoutKeyboard");

function armScannerFocus() {
  code.setAttribute("readonly", "");          // suppress IME
  code.focus({ preventScroll: true });

  // first real input from scanner -> enable editing
  const enable = () => {
    code.removeAttribute("readonly");
    code.removeEventListener("keydown", enable);
    code.removeEventListener("beforeinput", enable);
  };

  code.addEventListener("keydown", enable, { once: true });
  code.addEventListener("beforeinput", enable, { once: true });
}

armScannerFocus();
</script>