需求:

有些資料欄位在UI上設計為分段或分區輸入,如下方的手機欄位分為三個區塊。

使用者希望能夠在輸入完前一個區塊後自動跳轉到後一個區塊(1跳2,2跳3)
以下使用JavaScript來實作需求,首先實作跳轉方法。

            //輸入內容到限制長度後跳轉至指定元件
            function JumpToSpecifiedItem(currentItem, specificedItem) {
                if (currentItem.value.length == currentItem.maxLength) {
                    currentItem.form.elements[specificedItem].focus();
                }
            }

方法的第一個參數為目前使用者正在輸入的UI元件,這邊是透過maxLength來判斷是否要跳轉。
第二個參數為要跳轉的目標UI元件,該元件透過呼叫focus來達到跳轉。
接著就是UI元件部分。

<label id ="userPhoneNumberLabel">手機</label>
<div class="form-inline">
<asp:TextBox runat="server" ID="userPhoneNumberFirstSection" MaxLength="4" onKeyUp="JumpToSpecifiedItem(this,'ctl00$MainContent$userPhoneNumberSecondSection')"/>
<asp:TextBox runat="server" ID="userPhoneNumberSecondSection" MaxLength="3" onKeyUp="JumpToSpecifiedItem(this,'ctl00$MainContent$userPhoneNumberThirdSection')"/>
<asp:TextBox runat="server" ID="userPhoneNumberThirdSection" MaxLength="3" placeholder="000"/>
</div>

重點為

1.要設定ID
2.要設定MaxLength(因為是透過該值來判斷是否跳轉,當然也可以使用別的值)
3.呼叫JumpToSpecifiedItem方法,第2個參數要確認實際的ID值。(透過實際網頁上點擊F12來確認)