There's a inputs with six entries. If the desired digits is directly pasted into the inputs..
123456
How do I distribute the numbers to the other boxes when they are pasted into the first box?
on JSfiddle
var $inp = $(".passInput");
$inp.on({
input: function(ev) {
if(this.value) {
$inp.eq($inp.index(this) + 1).focus();
}
},
keydown: function(ev) {
var i = $inp.index(this);
if(ev.which===8 && !this.value && i) {
$inp.eq(i - 1).focus();
}
}
});
.passInput {text-align: center;}
<form action="" role="form" method="post" id="passForm">
<input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}" autofocus>
<input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
<input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
<input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
<input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" required pattern="\d{1}">
<input type="text" class="passInput" name="pass[]" maxLength="1" size="1" autocomplete="off" min="0" max="9" pattern="\d{1}">
<button type="submit" class="btn btn-lg btn-primary">SUBMIT</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Thank you Roko C. Buljan who helped in the development of the code
To get the clipboardData text use event.clipboardData.getData('text')
,
then make sure that the trimmed data length is exactly 6 characters long and all are digits.
Assign to each input its new value by splitting the string, and lastly, set focus on the last input:
// DOM utility functions:
const els = (sel, par) => (par || document).querySelectorAll(sel);
// Task: multiple inputs "field"
els(".pin").forEach((elGroup) => {
const elsInput = [...elGroup.children];
const len = elsInput.length;
const handlePaste = (ev) => {
const clip = ev.clipboardData.getData('text'); // Get clipboard data
const pin = clip.replace(/\s|-/g, ""); // Sanitize string
const ch = [...pin]; // Create array of chars
elsInput.forEach((el, i) => el.value = ch[i]??""); // Populate inputs
elsInput[Math.min(len, pin.length) - 1]?.focus(); // Focus input
};
const handleInput = (ev) => {
const elInp = ev.currentTarget;
const i = elsInput.indexOf(elInp);
if (elInp.value && (i+1) % len) elsInput[i + 1]?.focus(); // focus next
};
const handleKeyDn = (ev) => {
const elInp = ev.currentTarget
const i = elsInput.indexOf(elInp);
if (!elInp.value && ev.key === "Backspace" && i) elsInput[i - 1]?.focus(); // Focus previous
};
// Add the same events to every input in group:
elsInput.forEach(elInp => {
elInp.addEventListener("paste", handlePaste); // Handle pasting
elInp.addEventListener("input", handleInput); // Handle typing
elInp.addEventListener("keydown", handleKeyDn); // Handle deleting
});
});
.pin > input {
text-align: center;
width: 1em;
}
.pin > input:invalid {
color: red;
caret-color: #000;
}
Copy a PIN into any of the below inputs:<br>
<br>
<code>123329</code><br>
<code>6 5 0 3 2 1</code><br>
<code>444-998</code><br>
<code>x1A23z</code>
<code>12</code>
<br>
<form>
<br>
<div class="pin">
PIN:
<input type="text" name="pass[]" maxlength="1" autocomplete="off" required pattern="\d{1}" autofocus>
<input type="text" name="pass[]" maxlength="1" autocomplete="off" required pattern="\d{1}">
<input type="text" name="pass[]" maxlength="1" autocomplete="off" required pattern="\d{1}">
<input type="text" name="pass[]" maxlength="1" autocomplete="off" required pattern="\d{1}">
<input type="text" name="pass[]" maxlength="1" autocomplete="off" required pattern="\d{1}">
<input type="text" name="pass[]" maxlength="1" autocomplete="off" required pattern="\d{1}">
</div>
<br>
<button type="submit" class="btn btn-lg btn-primary">SUBMIT</button>
</form>