if ('customElements' in window && 'OTPCredential' in window) {
customElements.define("web-otp",
class extends HTMLInputElement {
connectedCallback() {
this.abortController = new AbortController();
this.receive();
}
disconnectedCallback() {
this.abort();
}
abort() {
this.abortController.abort();
}
async receive() {
try {
const content = await navigator.credentials.get({
otp: {transport:['sms']}, signal: this.abortController.signal
});
this.value = content.code;
this.dispatchEvent(new Event('autocomplete'));
} catch (e) {
console.error(e);
}
}
}, {
extends: "input"
});
}
Last active
September 11, 2020 09:58
-
-
Save agektmr/67dce7e9db26c48b5ddc6811fb95d02d to your computer and use it in GitHub Desktop.
`input[autocomplete="one-time-code"]` polyfill using Web OTP API
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
this.signal
withthis.abortController
.abort
property with.signal
. It was a spec issue.Regarding "polyfill", this is more of making Chrome to work like Safari's declarative behavior.