如何粘贴到多个输入? [英] How do paste to multiple input?
问题描述
有六个条目的输入。如果所需数字直接粘贴到输入中..
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?
在 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>
谢谢 Roko C. Buljan 谁帮助开发代码
Thank you Roko C. Buljan who helped in the development of the code
PS:我已经回答了问题的答案。但我意识到它无法正常工作。
推荐答案
要获取剪贴板数据文本,请使用 ev.originalEvent.clipboardData.getData('text')
,
比确保剪裁长度正好是6个字符长并且都是数字。
通过拆分字符串为每个输入分配新值,并聚焦最后一个输入:
To get the clipboard data text use ev.originalEvent.clipboardData.getData('text')
,
than make sure the trimmed length is exactly 6 characters long and all are digits.
Assign to each input it's new value by splitting the string, and focus the last input:
const $inp = $(".passInput");
$inp.on({
paste(ev) {
const pasteStr = ev.originalEvent.clipboardData.getData('text').trim();
if (!/\d{6}/.test(pasteStr)) return ev.preventDefault(); // pass invalid. Exit here
const s = pasteStr.split('');
$inp.val(i => s[i]).eq(5).focus();
},
input(ev) {
if (this.value) $inp.eq($inp.index(this) + 1).focus();
},
keydown(ev) {
const i = $inp.index(this);
if (ev.which === 8 && !this.value && i) $inp.eq(i - 1).focus();
}
});
.passInput {
text-align: center;
}
Copy and paste into any field: 456123<br>
Than try with some invalid string: aA123B
<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>
这篇关于如何粘贴到多个输入?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!