搜索
SR數位設計 ECSHOP RWD響應式技術開發 JS程式語法 欄位輸入自動換行 (信用卡號輸入範例) 限制數字,字數 ...
byadmin 發表於 2015-7-15 14:07:21 , 1783人已閱讀 , 15人回應
很久沒發文了 , 最近剛好在某些網路購物進行信用卡輸入卡號時 , 發現很多間銀行的刷卡介面 , 卡號輸入製作的不是很流暢 , 因為不會自動換欄 , 還需要再用滑鼠移動過去點擊欄位 , 因此就延伸出寫這篇小應用的想法 .
以信用卡輸入欄位為例 , 需要考量的事情有以下:
1. 只能為數字
2. 一個欄位只能4碼
3. 輸入4碼後自動跳至下一欄
4. 若第4碼輸入為非數字則不許跳至下一欄

接下來就來用HTML + JS 來實現上面的需求吧 !
寫法上採用較土法煉鋼的方式 , 所以應該很好懂 , 簡單的講就是在每一欄位輸入時(範例是在onkeyup時觸發) 進行正則驗證 , 並且在第四碼通過時focus到下一欄位 , 其實可以有更精簡的寫法 , 不過為了要好理解 , 所以寫的明白一些 , 當作提供大家一個入門寫法參考囉 !

信用卡輸入教學.jpg



教學


遊客,如果您要查看本帖隱藏內容請回復






bycty32 發表於 2015-10-14 10:35:58
太好了,值得試一試。

回覆 顯示全部樓層 道具 舉報

byc85645 發表於 2016-1-15 16:12:04
最近專案有使用到想來請教看看~
希望能解決問題

回覆 顯示全部樓層 道具 舉報

by劉毅@FB 發表於 2016-6-22 08:47:16
very nice teach

回覆 顯示全部樓層 道具 舉報

byallen1815010 發表於 2016-6-22 08:52:28
謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝

回覆 顯示全部樓層 道具 舉報

by陳惠勝@Y 發表於 2016-6-24 14:44:43
有興趣,感謝您的分享

回覆 顯示全部樓層 道具 舉報

by俞晉平@FB 發表於 2016-6-24 14:52:58
謝謝提供

回覆 顯示全部樓層 道具 舉報

byCharlesChan@FB 發表於 2016-6-24 15:01:10
謝謝謝謝謝謝謝謝謝謝謝謝謝謝謝

回覆 顯示全部樓層 道具 舉報

by呂悅彰@FB 發表於 2016-6-24 15:10:23
謝謝大神謝謝大神謝謝大神謝謝大神

回覆 顯示全部樓層 道具 舉報

byJingJingJua@FB 發表於 2016-8-26 17:39:09
正好需要用到~~感謝大大

回覆 顯示全部樓層 道具 舉報

Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


ECSHOP響應式技術開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱:service@uniflow.com.tw 連絡電話03-3555-069 (時間AM10:00~PM7:30)

, Processed in 0.488031 second(s), 42 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5 GMT+8, 2017-2-26 18:14

回頂部