中央論壇 - CENTER BBS

標題: 連續Input - 信用卡或序號欄位填寫自動跳下一欄位 [打印本頁]

---

作者: 死神    時間: 2014-5-26 17:38
標題: 連續Input - 信用卡或序號欄位填寫自動跳下一欄位
一般信用卡的UI會用4格Input Text來呈現，要達到填寫信用卡或序號時，只要填滿就會自動跳下一欄位，我們要借助Javascript才有辦法達到此效果。

---

範例一：此範例使用原生JS，轉貼自用Javascript達到信用卡或序號填寫時自動跳下欄位的方法

首頁我們在html 先把要輸入的欄位列出：

1. 信用卡卡號
   
2. <input type=text name=pan_no1 size=4 value="" maxlength=4 onKeyUp="setBlur(this,'pan_no2');">-
   
3. <input type=text name=pan_no2 size=4 value="" maxlength=4 onKeyUp="setBlur(this,'pan_no3');">-
   
4. <input type=text name=pan_no3 size=4 value="" maxlength=4 onKeyUp="setBlur(this,'pan_no4');">-
   
5. <input type=text name=pan_no4 size=4 value="" maxlength=4 >  

複製代碼

再來寫個 Javascript，判斷該欄位填入的長度是不是等於maxLength如果是就跳下一個欄位

1. <script>
   
2.   function setBlur(obj,target2)
   
3.   {
   
4.      var target =document.getElementById(target2);
   
5.        if( obj.value.length ==obj.getAttribute('maxlength'))
   
6.            {
   
7.                target.focus();
   
8.            }
   
9.        return;
   
10.   }
    
11. </script>

複製代碼

---

範例二：使用JQuery，包含判定輸入為數字：

1. 
   
2. 
   
3. // 信用卡卡號自動跳下欄位
   
4. $('body').find('#coupon-focus').children('input').focus().select();
   
5. $('body').find('#coupon-focus').children('input').keyup( function(e){
   
6. // 限制只能輸入數字
   
7.   if(!/^\d+$/.test(this.value)){
   
8.     var newValue = /^\d+/.exec(this.value);
   
9.     newValue != null ? $(this).val(newValue) : $(this).val('');
   
10.     }
    
11.   this.value.length == this.getAttribute('maxlength') && $(this).next().focus();
    
12. });
    
13. 
    
14. 
    
15. 
    

複製代碼

此範例就不多做解釋，自己修改選擇器以達到需求。

---

歡迎光臨 中央論壇 - CENTER BBS (https://www.centerbbs.com/)

Powered by Discuz! X3