jquery复制粘贴数字以填充输入字段

Question

我已经尝试过了，但是在 keyup 上无法跳转下一个输入但退格可以找到。

外观特征：

• 在 Keyup 时跳转到下一个输入
• 在 Backspace 上跳转到上一个输入
• 粘贴代码并将代码分发到所有输入字段，步长为 maxLength

$('.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>