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!