請選擇 進入手機版 | 繼續訪問電腦版
搜索
熱搜: 活動 交友 discuz
查看: 6074|回復: 0

[JavaScript] 連續Input - 信用卡或序號欄位填寫自動跳下一欄位

[複製鏈接]
發表於 2014-5-26 17:38:09 | 顯示全部樓層 |閱讀模式
一般信用卡的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. $('body').find('#coupon-focus').children('input').focus().select();
  3. $('body').find('#coupon-focus').children('input').keyup( function(e){
  4. // 限制只能輸入數字
  5.   if(!/^\d+$/.test(this.value)){
  6.     var newValue = /^\d+/.exec(this.value);
  7.     newValue != null ? $(this).val(newValue) : $(this).val('');
  8.     }
  9.   this.value.length == this.getAttribute('maxlength') && $(this).next().focus();
  10. });



複製代碼
此範例就不多做解釋,自己修改選擇器以達到需求。
您需要登錄後才可以回帖 登錄 | 註冊

本版積分規則

本論壇為非營利之網路平台,所有文章內容均為網友自行發表,不代表論壇立場!若涉及侵權、違法等情事,請告知版主處理。


Page Rank Check

廣告刊登  |   交換連結  |   贊助我們  |   服務條款  |   免責聲明  |   客服中心  |   中央分站

手機版|中央論壇

GMT+8, 2019-10-19 23:23 , Processed in 0.061493 second(s), 17 queries .

Powered by Discuz!

© 2005-2015 Copyrights. Set by YIDAS

快速回復 返回頂部 返回列表