需求:
有些資料欄位在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來確認)
