maxlength 4のページに4つのテキストボックスがあります。私の目標は、ユーザーが最初のテキストボックスに入力すると、フォーカスが自動的に別のテキストボックスに移動することです。私が書いた方法は、すべてのWebブラウザーで正常に機能しますが、モバイルブラウザーでは機能しません。
私が使用しているマークアップ:
<input tabindex="3" type="text" id="cnumber1" class="inputBx ccNumber" style="width:57px;margin-left: 11px!important" maxlength="4" size="4" autocomplete="off" />
<input tabindex="4" type="text" id="cnumber2" class="ccNumber" style="width:57px;" maxlength="4" size="4" autocomplete="off"/>
<input tabindex="5" type="text" id="cnumber3" class="ccNumber" style="width:56px;" maxlength="4" size="4" autocomplete="off"/>
<input tabindex="6" type="text" id="cnumber4" class="ccNumber" style="width:56px;" maxlength="4" size="4" autocomplete="off"/>
私が使用しているJqueryメソッド:
(function($) {
$.switchFocus = function($this) {
$this.unbind('keyup');
$this.each(function() {
$(this).keyup(function(){
var $this = $(this),
inputVal = $this.val(),
iLen = inputVal.length,
$nextEle = $this.next();
if (iLen == $this.attr("size") && $nextEle.length > 0){
if($nextEle.val().length === 0)
$nextEle.focus();
}
});
});
}
}(jQuery));
これがモバイルブラウザで発生している理由について、助けをいただけますか?