Packages
moon
2.76.0
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
assets/js/hooks/auth_code.js
export default {
mounted() {
this.inputs = Array.from(
this.el.querySelectorAll('input:not([type="hidden"])')
);
this.hiddenField = this.el.querySelector('input[type="hidden"]');
this.inputValues = this.inputs.map((input) => input.value);
this.form = this.el.dataset.has_form !== undefined;
this.handleOnChange();
this.handleOnKeydown();
this.handleOnPaste();
},
handleOnChange() {
this.inputs.forEach((input, index) => {
input.addEventListener("input", (event) => {
const value = event.target.value;
const nextInput = this.inputs[index + 1];
const pattern = input.getAttribute("pattern");
if (value.length > 1) {
event.target.value = value.charAt(0);
if (nextInput !== undefined && !this.form) {
nextInput.focus();
}
} else if (value.match(new RegExp(pattern, "gi"))) {
if (nextInput !== undefined && !this.form) {
nextInput.focus();
}
} else {
event.target.value = "";
}
event.preventDefault();
this.updateHiddenField();
});
});
},
handleOnKeydown() {
this.inputs.forEach((input, index) => {
input.addEventListener("keydown", (event) => {
const prevInput = this.inputs[index - 1];
if (event.key === "Backspace" && !this.form) {
if (input.value === "") {
if (prevInput !== undefined) {
prevInput.value = "";
prevInput.focus();
}
} else {
input.value = "";
}
this.updateHiddenField();
event.preventDefault();
}
});
});
},
handleOnPaste() {
this.inputs.forEach((input, index) => {
input.addEventListener("paste", (event) => {
const count = this.inputs.length - 1;
const lastInput = this.inputs[count];
const pastedValue = event.clipboardData.getData("Text");
const pattern = input.getAttribute("pattern");
let currentInput = index;
let pastedCount = 0;
for (let i = 0; i < pastedValue.length; i++) {
const pastedCharacter = pastedValue.charAt(i);
if (
pastedCharacter.match(pattern) &&
currentInput < this.inputs.length
) {
this.inputs[currentInput].value = pastedCharacter;
currentInput++;
pastedCount++;
}
}
const nextInput = this.inputs[currentInput];
if (nextInput !== undefined) {
nextInput.focus();
} else {
lastInput.focus();
}
this.updateHiddenField();
this.hiddenField.dispatchEvent(
new Event("input", { bubbles: true })
);
event.preventDefault();
});
});
},
updateHiddenField() {
const inputValues = this.inputs.map((input) => input.value);
this.hiddenField.value = inputValues.join("");
},
};