jquery复制粘贴数据来填补输入提交

Question

我已经试过了，但是在keyup上不能跳下一个输入，但退格工作找到。

看特点:

• 上键跳转到下一个输入
• 按退格跳转到前一个输入
• 粘贴的代码和代码分发给所有步骤输入字段的最大长度

$('.col').on('input', '.press', function() {
if (this.value.length >= this.maxLength) {
$(this).parent().next('div.col').find('input').focus();

}
}).keyup(function(e) {
if (e.which === 8 && !this.value) {
$(this).prev().find('input').focus();
}
});

body{display: flex;}
.form-control{width: 70px;
margin-right: 10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control" name="code" maxlength="1" autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control"  name="code" maxlength="1" autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control"  name="code" maxlength="1" autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control"  name="code" maxlength="1" autocomplete="off">
</div>
</div>

Answer 1

我在输入类型文本字段上添加了tabindex属性。tabindex属性标识要关注的下一个选项卡索引。Javascript keyup事件现在将跳转到下一个输入，我将其增加为当前焦点索引。

我还在输入类型文本上添加了粘贴事件侦听器，并获取数据的长度，然后将值粘贴在其上。

$(function(){
document.querySelector('input').addEventListener("paste", function(p)
{
var dataLength = p.clipboardData.getData('text').length;

for(var i = 1; i <= dataLength; i++)
{   
$("input[tabindex='"+ i + "']").val(p.clipboardData.getData('text')[i - 1]);

if (this.value.length >= this.maxLength) 
{       
$("input[tabindex='"+ i + "']").focus();   
}
}
});
$('input[type="text"]').on('keyup', function(e) 
{
if (this.value.length >= this.maxLength) 
{
if(e.keyCode !== 9 && e.keyCode !== 16)
{
var tabIndex =  this.tabIndex + 1;  
$("input[tabindex='"+ this.tabIndex + "']").val(this.value);
$("input[tabindex='"+ tabIndex + "']").focus(); 
}
} 
else
{
if(e.keyCode === 8)
{
var tabIndex =  this.tabIndex - 1;
$("input[tabindex='"+ tabIndex + "']").focus();
}

}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control" name="code" maxlength="1" tabindex="1" autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control"  name="code" maxlength="1" tabindex="2" autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control"  name="code" maxlength="1" tabindex="3" autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control"  name="code" maxlength="1" tabindex="4" autocomplete="off">
</div>
</div>