輸入焦點變化

Question

我試圖做猜謎這樣的填字遊戲，當輸入字段爲字母時，需要改變輸入焦點。問題是，我可以改變重點是在同一個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改變焦點上輸入。 有什麼建議嗎？

Answer 1

我假設你將有一個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>

Answer 2

可以編寫代碼，看看是否有在同一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。

Answer 3

您可以使用輸入的收集，並使用單擊元素的索引遍歷它：

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>

Answer 4

你可以嘗試這樣的事： 與設置索引值解決這個到您的輸入:)

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

Answer 5

您可以使用以下

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