設置焦點文本框onkeypressed

即時通訊編寫付款頁面，有4個文本框的信用卡號碼輸入和數字設置後專注於另一個控制我爲第一個文本框我的JavaScript代碼工作正常，但其他文本框不工作...這裏是我的代碼...：設置焦點文本框onkeypressed

<script type="text/javascript"> 
    function Length_txtCardNumber1_Validator() { 
     if (document.getElementById('<%= txtCardNumber1.ClientID %>').value.length = 4) { 
      document.getElementById('<%= txtCardNumber2.ClientID %>').focus(); 
      return (false); 
     } 
     return (true); 
    } 


    function Length_txtCardNumber2_Validator() { 
     if (document.getElementById('<%= txtCardNumber2.ClientID %>').value.length = 4) { 
      document.getElementById('<%= txtCardNumber3.ClientID %>').focus(); 
      return (false); 
     } 
     return (true); 
    } 

    function Length_txtCardNumber3_Validator() { 
     if (document.getElementById('<%= txtCardNumber3.ClientID %>').value.length = 4) { 
      document.getElementById('<%= txtCardNumber4.ClientID %>').focus(); 
      return (false); 
     } 
     return (true); 
    } 
</script>

後面的代碼onpage_load：

txtCardNumber1.Attributes.Add("onkeypress", "return Length_txtCardNumber1_Validator()"); 
txtCardNumber2.Attributes.Add("onkeypress", "return Length_txtCardNumber2_Validator()"); 
txtCardNumber3.Attributes.Add("onkeypress", "return Length_txtCardNumber3_Validator()");

謝謝...

來源

2011-02-11 serim urhan

ZOZO答案應該解決您的眼前的問題，你雖然可以提高代碼，使之更加「通用」，讓我們知道，如果有興趣。 – 2011-02-11 09:16:00

確定編號喜歡...我該怎麼做... – 2011-02-11 10:03:10

看到我的答案。 :)順便用`@`來通知人們你在回覆評論時，否則大多數人不會回來，因爲他們不會看到你發佈它。 – 2011-02-12 10:33:09

您可以擁有「通用」代碼而不依賴於文本框的ID或名稱，並且只允許數字作爲獎勵。

首先，包裝單容器中的所有文本框，並給他們maxlength這樣的：

<div id="CreditCardPanel"> 
    <asp:Textbox id="txtCardNumber1" runat="server" Columns="3" MaxLength="4" /> - 
    <asp:Textbox id="txtCardNumber2" runat="server" Columns="3" MaxLength="4" /> - 
    <asp:Textbox id="txtCardNumber3" runat="server" Columns="3" MaxLength="4" /> - 
    <asp:Textbox id="txtCardNumber4" runat="server" Columns="3" MaxLength="4" /> 
</div>

現在，所有你需要做的是具有這樣的JS代碼，這一切都完成：

<script type="text/javascript"> 
var arrCreditCardInputs = []; 
window.onload = function WindowLoad() { 
    var arrInputs = document.getElementById("CreditCardPanel").getElementsByTagName("input"); 
    for (var i = 0; i < arrInputs.length; i++) { 
     var oCurInput = arrInputs[i]; 
     if (oCurInput.type == "text") { 
      oCurInput.onkeypress = function(event) { 
       //allow digits only: 
       var keyCode = event.keyCode || event.which; 
       if (keyCode >= 48 && keyCode <= 57) { 
        if (this.value.length + 1 >= this.maxLength) { 
         var index = parseInt(this.getAttribute("arr_index"), 10); 
         var nextIndex = ((index + 1) % arrCreditCardInputs.length); 
         window.setTimeout(function() { 
          arrCreditCardInputs[nextIndex].focus(); 
         }, 200); 
        } 
        return true; 
       } 
       else { 
        return false; 
       } 
      } 

      oCurInput.setAttribute("arr_index", i + "");  
      arrCreditCardInputs.push(oCurInput); 
     } 
    } 
} 
</script>

基本上，代碼將獲取容器中的所有文本框元素，並分配它們的onkeypress事件，以便只能按下數字，並在達到最大長度時將焦點放在包含它們的全局數組中的下一個文本框。

定時器用於允許瀏覽器更改文本框的值，否則立即設置焦點將「取消」按鍵並且值不會改變。

現場測試案例可用here，嘗試搞亂代碼並理解它是如何工作的。 :)

來源

2011-02-12 10:30:12

使用==進行比較。

function Length_txtCardNumber3_Validator() { 
    if (document.getElementById('<%= txtCardNumber3.ClientID %>').value.length == 4) { 
     document.getElementById('<%= txtCardNumber4.ClientID %>').focus(); 
     return (false); 
    } 
    return (true); 
}

來源

2011-02-11 09:11:45 zozo

我綁定的keyup事件的文本框

 $('#ccNumber1').bind('keyup',function() { 
      if ($(this).val().length == 4) 
       $('#ccNumber2').focus(); 
     });

來源

2013-06-25 08:56:05 jsnoob

設置焦點文本框onkeypressed

回答

相關問題