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