javascript – Autofill SMS Passcode Not Working in Vue.js/Ionic App on iOS

I am creating an utility utilizing Vue.js and Ionic, and I’ve encountered a problem with the SMS passcode autofill characteristic on iOS. In my app, customers obtain a one-time SMS passcode for authentication. Ideally, when this SMS is obtained, the iPhone ought to detect the passcode and supply to autofill it into the app’s enter fields. Nonetheless, once I faucet on the passcode, which seems above the iOS keyboard, it doesn’t auto fill the enter bins.

This is how I’ve carried out the enter fields in my app:

<kind>
  <enter
    v-for="(n, index) in code"
    :key="index"
    kind="textual content"
    sample="d*"
    :id="'input_' + index"
    maxlength="1"
    v-model="code[index]"
    @enter="handleInput"
    @keydown="isNumber"
    @keydown.delete="handleDelete"
    @paste="onPaste"
  />
</kind>

And this is a snippet from the script:

handleInput(occasion) {
      const inputType = occasion.inputType;
      let currentActiveElement = occasion.goal;

      if (inputType === "insertText") {
        if (currentActiveElement && currentActiveElement.nextElementSibling) {
          currentActiveElement.nextElementSibling.focus();
        } else {
          currentActiveElement.blur();
        }
      }

      if (inputType === "insertFromPaste" && this.dataFromPaste) {
        for (const num of this.dataFromPaste) {
          const id = parseInt(currentActiveElement.id.cut up("_")[1]);
          currentActiveElement.worth = num;
          this.codehttps://stackoverflow.com/q/78258197 = num;
          if (currentActiveElement && currentActiveElement.nextElementSibling) {
            currentActiveElement.nextElementSibling.focus();
            currentActiveElement = currentActiveElement.nextElementSibling;
          } else {
            currentActiveElement.blur();
            break;
          }
        }
      }
},
isNumber(occasion) {
      occasion.currentTarget.worth = "";
      const keyPressed = occasion.key;
      if (!this.keysAllowed.consists of(keyPressed)) {
        occasion.preventDefault();
      }
},
handleDelete(occasion) {
      let worth = occasion.goal.worth;
      let currentActiveElement = occasion.goal;
      if (!worth) {
        const id = parseInt(currentActiveElement.id.cut up("_")[1]);
        this.codehttps://stackoverflow.com/q/78258197 = "";
        if (currentActiveElement && currentActiveElement.previousElementSibling) {
          currentActiveElement.previousElementSibling.focus();
        }
      }
},
onPaste(occasion) {
      if (occasion.clipboardData) {
        const pastedData = occasion.clipboardData.getData("textual content").trim().cut up("").slice(0, 6); // Guarantee solely first 6 characters are thought of
        for (let i = 0; i < pastedData.size; i++) {
          const inputIndex = parseInt(occasion.goal.id.cut up("_")[1]) + i;
          if (inputIndex < this.code.size) {
            this.code[inputIndex] = pastedData[i];
            const nextInput = doc.getElementById(`input_${inputIndex + 1}`);
            if (nextInput) {
              nextInput.focus(); // Transfer focus to subsequent enter subject
            }
          }
        }
        occasion.preventDefault(); // Forestall default paste habits
      }
},

keysAllowed = [“0″,”1″,”2″,”3″,”4″,”5″,”6″,”7″,”8″,”9”]

I’ve examined the copy and paste operate on internet browser and on android gadgets. They’re working as anticipated. Nonetheless, in iOS gadgets, it isn’t working.

Please counsel and lots of thanks!