Packages
moon
2.90.5
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
Retired package: Deprecated - Package no longer supported. Use moon_live_view package instead
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("");
},
};