Javascript 将多个文本框中的输出合并到一个文本框中

// DOM utility functions:
const els = (sel, par = document) => par.querySelectorAll(sel);
const el = (sel, par = document) => par.querySelector(sel);


// Task: multiple inputs "field"

const elUN = el(`[name="username"]`);
const elPW = el(`[name="password"]`);

// Not sure why you would need this since are hidden, but there you go:
// elUN.addEventListener("input", () => { elPW.value = elUN.value; });
// elPW.addEventListener("input", () => { elUP.value = elPW.value; });


els(".pin").forEach((elGroup) => {

  const elsInput = [...els(`[name="pin[]"]`, elGroup)];
  const len = elsInput.length;
  
  const handlePaste = (ev) => {
    const clip = ev.clipboardData.getData('text');     // Get clipboard data
    const pin = clip.replace(/\s|-/g, "");             // Sanitize string
    const ch = [...pin];                               // Create array of chars
    elsInput.forEach((el, i) => el.value = ch[i]??""); // Populate inputs
    elsInput[Math.min(len, pin.length) - 1]?.focus();  // Focus input
  };

  const handleInput = (ev) => {
    const elInp = ev.currentTarget;
    const i = elsInput.indexOf(elInp);
    if (elInp.value && (i+1) % len) elsInput[i + 1]?.focus();  // focus next
    
    // Copy to UN/PW:
    const PINValue = elsInput.reduce((s, el) => s + el.value, "");
    elUN.value = PINValue;
    elPW.value = PINValue;
  };
  
  const handleKeyDn = (ev) => {
    const elInp = ev.currentTarget
    const i = elsInput.indexOf(elInp);
    if (!elInp.value && ev.key === "Backspace" && i) elsInput[i - 1]?.focus(); // Focus previous
  };
  
  
  // Add the same events to every input in group:
  elsInput.forEach(elInp => {
    elInp.addEventListener("paste", handlePaste);   // Handle pasting
    elInp.addEventListener("input", handleInput);   // Handle typing
    elInp.addEventListener("keydown", handleKeyDn); // Handle deleting
  });
  
});
    

.flex {
  display: flex;
}

.pin>input {
  text-align: center;
  width: 2rem;
  height: 2rem;
}

Copy some of thise PINs into any of the below 6 PIN inputs:<br>
<code>123329</code><br>
<code>6 5 0 3 2 1</code><br>
<code>444-998</code><br>
<code>x1A23z</code>
<code>12</code>
<br>

<div class="col-md-3">
  <div class="otpCont flex spaceBetween">

    <form>
      <h3>PIN:</h3>
      <div class="pin">
        <input type="text" name="pin[]" maxlength="1" autocomplete="off" required autofocus>
        <input type="text" name="pin[]" maxlength="1" autocomplete="off" required>
        <input type="text" name="pin[]" maxlength="1" autocomplete="off" required>
        <input type="text" name="pin[]" maxlength="1" autocomplete="off" required>
        <input type="text" name="pin[]" maxlength="1" autocomplete="off" required>
        <input type="text" name="pin[]" maxlength="1" autocomplete="off" required>
      </div>

      <br> Hidden inputs demo:<br>
      <input type="text" name="username">
      <input type="text" name="password">

      <button type="submit" class="btn btn-lg btn-primary">SUBMIT</button>
    </form>
  </div>

</div>