如何在每個輸入達到最大長度時自動提前聚焦

爲了增加我正在構建的信用卡表單的可用性，我希望瀏覽器在用戶鍵入允許的字符後將焦點移至下一個輸入input的maxlength屬性。如何在每個輸入達到最大長度時自動提前聚焦

我已經完成了這與三個輸入字段在目前，但在一個非常笨重，不可擴展的方式。見下面的代碼。

我想要做的是腳本如下：

如果用類autotab輸入已經達到了它的maxlength，將焦點移到任何類的下一個最接近的輸入。另外（我在下面的代碼中還沒有完成的東西）如果類autotab的輸入值爲空/空，並且退格/刪除鍵被按下，焦點應該移動到任何類的前一個最接近的輸入處

我的目標是擺脫對特定字段的寫入變量的依賴，並使這個過程自動化一下。

$(document).ready(function() { 

    var CCCardFill = 0; 
    var CCExpMonthFill = 0; 
    var CCExpYearFill = 0; 

    var CCCardMax = 16; 
    var CCExpMonthMax = 2; 
    var CCExpYearMax = 4; 

    $("input").keyup(function() { 
     var CCCardFill = $(".CCCard").val().length; 
     var CCExpMonthFill = $(".CCExpMonth").val().length; 
     var CCExpYearFill = $(".CCExpYear").val().length; 

     if (CCCardFill >= CCCardMax) { 
     $(".CCExpMonth").focus(); 
     } 
     if (CCExpMonthFill >= CCExpMonthMax) { 
     $(".CCExpYear").focus(); 
     } 
     if (CCExpYearFill >= CCExpYearMax) { 
     $(".CCName").focus(); 
     } 

    }); 

    });

運作codepen這裏：http://codepen.io/jeremypbeasley/pen/BoJVRW

來源

2015-10-21 Jeremy P. Beasley

作爲Web的用戶，我很驚訝，要問這是如何提高可用性。特別是，您的用戶將如何應對忘記其信用卡號碼的最後一位數字？ – darch

這是仿照LukeW（先生可用性本身）單輸入信用卡形式。 http://www.lukew.com/ff/entry.asp?1667我們測試了由Luke's和傳統的「標籤推進焦點」領域下面的答案產生的表格，並且它在速度和用戶滿意度上都呈指數級地增長。 –

在你的情況，你可以簡單地做：

$(this).next("input").focus();

要更換你的.focus()項目。這將從當前元素移動到DOM中下一個input元素。

來源

2015-10-21 04:28:05

您可以使用maxLength和value.length屬性。當達到最大長度時，您可以使用next().focus()來簡單地聚焦下一個項目。

$("input[maxlength]").keyup(function() { 
    var maxLen = this.maxLength; 
    var currentLen = this.value.length; 

    if (maxLen === currentLen) 
    { 
     $(this).next().focus(); 
    } 
});

這是working JSFiddle demo。

在是否有您的input s的其他HTML元素的情況下，你可以使用這個nextAll("input").first()一個後獲得選擇匹配最接近的元素：

$(this).nextAll("input").first().focus();

Another one JSFiddle Demo。

來源

2015-10-21 04:29:38

'> ='而不是'==='怎麼樣？ – Rayon

@RayonDabre'value.length'可以超過'maxLength'嗎？ –

Man ...很有幫助。太感謝了！ –

$("input").keyup(function() { 
 
    var value = $(this).val().length; 
 
    var max = $(this).attr('maxlength') 
 
    console.log(value); 
 
    console.log(max); 
 
    if (value == max) { 
 
    console.log('equal'); 
 
    $("input").next().focus(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<input type='text' maxlength='10'> 
 
<input type='text' maxlength='10'>

嘗試獲得了ATTR最大長度，並將其與瓦爾（）。長度是否相等焦點的下一個輸入

來源

2015-10-21 04:30:08 guradio

所有的輸入可能沒有'maxlength'屬性.. – Rayon

如果你沒有maxlength屬性，你將如何達到最大長度？ – guradio

更具體的選擇器如何？使用'null'或'undefined'比較長度對我來說沒有意義！ – Rayon

<script> 
 
function autotab(current,to){ 
 
    if (current.getAttribute && 
 
     current.value.length==current.getAttribute("maxlength")) { 
 
     to.focus() 
 
     } 
 
} 
 
</script> 
 

 
<b>Enter your phone number ex (1-888-555-1234):</b> 
 
<form name="telephone"> 
 
<input type="text" name="phone0" 
 
    size=2 onKeyup="autotab(this, document.telephone.phone1)" maxlength=1>- 
 
<input type="text" name="phone1" 
 
    size=4 onKeyup="autotab(this, document.telephone.phone2)" maxlength=3>- 
 
<input type="text" name="phone2" 
 
    size=4 onKeyup="autotab(this, document.telephone.phone3)" maxlength=3>- 
 
<input type="text" name="phone3" size=5 maxlength=4> 
 
</form>

下面是我會做到這一點。每個元素都使用onKeyup事件來調用發送其自己的對象的autotab函數和以下元素的對象以專注於測試maxlength。

來源

2015-10-21 04:32:38 PC3TJ

您想查看觸發事件的輸入。this內部事件處理程序是想要的元素

var $inputs = $("input") 

$inputs.keyup(function() { 
    var $input = $(this), max = $input.attr('maxlength'); 
    if(max){ 
     max = parseInt(max,10); 
     if(this.value && this.value.length == max){ 
      $inputs($inputs.index(this) +1).focus() 
     } 
    } 

})

來源

2015-10-21 04:33:18 charlietfl

如何在每個輸入達到最大長度時自動提前聚焦

回答

相關問題