43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
/*
|
|
* https://github.com/morethanwords/tweb
|
|
* Copyright (C) 2019-2021 Eduard Kuzmenko
|
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
|
*/
|
|
|
|
import InputField, { InputFieldOptions } from "./inputField";
|
|
|
|
export default class CodeInputField extends InputField {
|
|
constructor(options: InputFieldOptions & {
|
|
length: number,
|
|
onFill: (code: number) => void
|
|
}) {
|
|
super({
|
|
plainText: true,
|
|
...options
|
|
});
|
|
|
|
const input = this.input as HTMLInputElement;
|
|
input.type = 'tel';
|
|
input.setAttribute('required', '');
|
|
input.autocomplete = 'off';
|
|
|
|
let lastLength = 0;
|
|
this.input.addEventListener('input', (e) => {
|
|
this.input.classList.remove('error');
|
|
this.setLabel();
|
|
|
|
const value = this.value.replace(/\D/g, '').slice(0, options.length);
|
|
this.setValueSilently(value);
|
|
|
|
const length = this.value.length;
|
|
if(length === options.length) { // submit code
|
|
options.onFill(+this.value);
|
|
} else if(length === lastLength) {
|
|
return;
|
|
}
|
|
|
|
lastLength = length;
|
|
});
|
|
}
|
|
}
|