无法吐出 iphone 中键盘正确建议的 otp

问：

HTML格式：

<div class="otp-widget" validate>
        <input type="text" maxlength="1" name="otp-1" id="otpDigit1" autocomplete="no" autocorrect="off" autocapitalize="off" oninput="handlePaste(this)" />
        <input type="text" maxlength="1" name="otp-2" id="otpDigit2" autocomplete="no" autocorrect="off" autocapitalize="off" />
        <input type="text" maxlength="1" name="otp-3" id="otpDigit3" autocomplete="no" autocorrect="off" autocapitalize="off" />
        <input type="text" maxlength="1" name="otp-4" id="otpDigit4" autocomplete="no" autocorrect="off" autocapitalize="off" oninput="verifyOTPUponInput(this)" />
      </div>

JS：

document.querySelectorAll('.otp-widget input').forEach(el => {
  el.addEventListener('keydown', (e) => {
    if (el.getAttribute('id') == 'otpDigit1') {
      document.querySelector('.otp-widget-error').innerHTML = '';
      document.querySelector('.otp-widget-error').classList.add('d-none');
    };
    var { maxLength, value, name } = e.target;
    var [fieldName, fieldIndex] = name.split("-");

    if (e.keyCode === 8|| e.keyCode === 46) {
      var { value, maxLength, name } = e.target;
      var [fieldName, fieldIndex] = name.split("-");

      var prevSibling = document.querySelector(
        `input[name=otp-${parseInt(fieldIndex, 10) - 1}]`
      );

      if (value.length < maxLength) {
        if (prevSibling !== null) {
          prevSibling.focus();
        }
      }
    }else if(!isNaN(value)){
      // Check if they hit the max character length
      if (value.length == maxLength) {
        // Check if it's not the last input field
        if (parseInt(fieldIndex, 10) < 4) {
          // Get the next input field
          var nextSibling = document.querySelector(
            `input[name=otp-${parseInt(fieldIndex, 10) + 1}]`
          );

          // If found, focus the next field
          if (nextSibling !== null) {
            el.blur();
            nextSibling.focus();
            nextSibling.select();
          }
        }
      }
    }
  });

  el.addEventListener('paste', (e) => {
    var paste = (e.clipboardData || window.clipboardData).getData('text');
    if (paste) {
      if (!isNaN(parseInt(paste))) {
        paste = paste.split('');
        var inputCount = document.querySelectorAll('.otp-widget input').length;
        var loopLen = inputCount;
        if (paste.length < inputCount) {
          loopLen = paste.length;
        };
        for (let i = 0; i < loopLen; i++) {
          document.querySelector(`input[name=otp-${i+1}]`).value = paste[i];
        };
        document.querySelector(`input[name=otp-${loopLen}]`).focus();
        verifyOTPUponInput();
      } else {
        document.querySelectorAll('.otp-widget input').forEach(input => {
          input.value = '';
        });
      };
    };
  });
});

function handlePaste(el) {
  const paste = el.value;
  const inputCount = document.querySelectorAll('.otp-widget input').length;
  const loopLen = Math.min(paste.length, inputCount);

  // Clear all inputs first
  document.querySelectorAll('.otp-widget input').forEach((input) => {
    input.value = '';
  });

  // Set the input values from the paste
  for (let i = 0; i < loopLen; i++) {
    document.querySelector(`input[name=otp-${i + 1}]`).value = paste[i];
  }

  // If not all fields are filled, focus on the next field
  if (loopLen < inputCount) {
    document.querySelector(`input[name=otp-${loopLen + 1}]`).focus();
  }

  // Call verification function
  verifyOTPUponInput();
}

这段代码似乎在任何地方都运行良好，非常顺利。OTP拆分，OTP粘贴和所有浏览器中的所有功能，但iPhone中的Safari浏览器除外。

在iphones中，键盘建议我们在消息中获得的otp，以及当我单击该建议时。otp 被填充如下图所示：

如何一劳永逸地解决这个问题？