Packages
moon
2.87.7
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);
// TODO: add support forms with re-render on "phx-change" event
this.hasFocusJump = !this.el.closest("form[phx-change]");
this.handleOnChange();
this.handleOnKeydown();
this.handleOnPaste();
},
handleOnChange() {
this.inputs.forEach((input, index) => {
input.addEventListener("input", (event) => {
const value = event.data || event.target.value;
const pattern = input.getAttribute("pattern");
if (value.length > 1) {
for(let i = index; i < this.inputs.length; i++) {
const nextInput = this.inputs[i + 1];
if (this.inputs[i] !== undefined) {
this.inputs[i].value = value.charAt(i - index);
}
if (nextInput) {
nextInput.focus();
}
}
} else if (value.match(new RegExp(pattern, "gi"))) {
const currentInput = this.inputs[index];
const nextInput = this.inputs[index + 1];
if (currentInput !== undefined && currentInput.value.length > 1) {
currentInput.value = currentInput.value.charAt(1);
}
if (nextInput !== undefined && this.hasFocusJump) {
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.hasFocusJump) {
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("");
},
};