输入焦点变化

我试图做猜谜这样的填字游戏，当输入字段为字母时，需要改变输入焦点。问题是，我可以改变重点是在同一个div的div输入焦点变化

$(':input').keyup(function (e) { 
    if ($(this).val().length == $(this).attr('maxlength')) { 
     $(this).closest('div').next().find(':input').first().focus(); 
    } 
})

$(".inputs").keyup(function() { 
    $(this).next().focus(); 
});

之间或两个领域，但我不知道如何改变专注于下一个输入没关系，如果它是在相同的div或它在另一个div中。

<div class="answer_1"> 
    <input class="inputs letter square border_orange" maxlength="1" type="text" /> 
    <input class="inputs letter square border_orange" maxlength="1" type="text" /> 
</div> 
<div class="answer_2"> 
    <input class="inputs letter square border_orange" maxlength="1" type="text" /> 
    <input class="inputs letter square border_orange" maxlength="1" type="text" /> 
</div>

HTML代码以上，我试图在ANSWER_1 DIV第一改变输入焦点内的输入，并且当我与第二输入这里完成，以全自动在下一DIV改变焦点上输入。有什么建议吗？

来源

2017-07-25 Marko Petković

我假设你将有一个form，因为你有输入字段。

$("input").keyup(function() { 
 
    var inputs = $(this).closest('form').find(':input'); 
 
    inputs.eq(inputs.index(this) + 1).focus(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="answer_1"> 
 
    <input class="inputs letter square border_orange" maxlength="1" type="text" /> 
 
    <input class="inputs letter square border_orange" maxlength="1" type="text" /> 
 

 
    </div> 
 
    <div class="answer_2"> 
 
    <input class="inputs letter square border_orange" maxlength="1" type="text" /> 
 
    <input class="inputs letter square border_orange" maxlength="1" type="text" /> 
 

 
    </div> 
 
</form>

来源

2017-07-25 08:22:02

可以编写代码，看看是否有在同一div任何控制。例如，可以使用以下代码。

$(".inputs").keyup(function() { 
    if ($(this).val().length == $(this).attr('maxlength')) { 
    if ($(this).next().length) { 
     $(this).next().focus(); 
    } else { 
     $(this).closest('div').next().find(':input').first().focus(); 
    } 
    } 
});

参见jsFiddle here。

来源

2017-07-25 08:23:33 Taleeb

您可以使用输入的收集，并使用单击元素的索引遍历它：

var $inputs = $(".inputs"); // get the collection of inputs 
 

 
$inputs.keyup(function() { 
 
    var index = $inputs.index(this); // get the index of the current input 
 
    
 
    $inputs.eq(index + 1).focus(); // focus the next input 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="answer_1"> 
 
    <input class="inputs letter square border_orange" maxlength="1" type="text" /> 
 
    <input class="inputs letter square border_orange" maxlength="1" type="text" /> 
 

 
</div> 
 
<div class="answer_2"> 
 
    <input class="inputs letter square border_orange" maxlength="1" type="text" /> 
 
    <input class="inputs letter square border_orange" maxlength="1" type="text" /> 
 

 
</div>

来源

2017-07-25 08:23:55

这是很好的解决方案。谢啦。 –

你可以尝试这样的事：与设置索引值解决这个到您的输入:)

$(".inputs").keyup(function() { 
 
    var thisEl = jQuery(this); 
 
    var index = parseInt(thisEl.data('index')); 
 
    if ($(this).val().length == $(this).attr('maxlength')) { 
 
     index++; 
 
     jQuery('.inputs[data-index="'+index+'"]').focus(); 
 
    } 
 
});

<div class="answer_1"> 
 
    <input data-index="1" class="inputs letter square border_orange" maxlength="1" type="text" /> 
 
    <input data-index="2" class="inputs letter square border_orange" maxlength="1" type="text" /> 
 
</div> 
 
<div class="answer_2"> 
 
    <input data-index="3" class="inputs letter square border_orange" maxlength="1" type="text" /> 
 
    <input data-index="4" class="inputs letter square border_orange" maxlength="1" type="text" /> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

来源

2017-07-25 08:26:24

您可以使用以下

$(".inputs").keyup(function() { 
 
    if ($(this).next().is("input")) { 
 
     alert("next child"); 
 
    } else { 
 
     alert("next div"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="answer_1"> 
 
    <input class="inputs letter square border_orange" maxlength="1" type="text" /> 
 
    <input class="inputs letter square border_orange" maxlength="1" type="text" /> 
 
</div> 
 
<div class="answer_2"> 
 
    <input class="inputs letter square border_orange" maxlength="1" type="text" /> 
 
    <input class="inputs letter square border_orange" maxlength="1" type="text" /> 
 
</div>

来源

2017-07-25 08:28:03 Gerard

这段代码如何帮助？：| –

输入焦点变化

回答

相关问题