服務信箱：sr.design2011@gmail.com搜尋本網站

SR網頁設計工作室 - 購物網站/企業官網專業開發

搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 › JS程式語法 › 欄位輸入自動換行 (信用卡號輸入範例) 限制數字,字數 ...

欄位輸入自動換行 (信用卡號輸入範例) 限制數字,字數

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

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

信用卡輸入教學.jpg


教學


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






信用卡

相關帖子

收藏回覆 只看該作者 道具 舉報

bycookie0010130 發表於 2019-5-17 18:25:58
想知道～～

回覆 只看該作者 道具 舉報

can
bycan 發表於 2019-5-17 18:14:52
asdasdaasdasd

回覆 只看該作者 道具 舉報

byrong85 發表於 2019-5-17 17:55:36
感謝提供！！

回覆 只看該作者 道具 舉報

bykitty501282102 發表於 2018-6-15 11:28:59
有興趣,.謝謝謝謝謝謝

回覆 只看該作者 道具 舉報

by1129 發表於 2018-6-15 11:25:54
51561561561

回覆 只看該作者 道具 舉報

bycs2869hu 發表於 2018-6-15 11:05:51
wow goodjob

回覆 只看該作者 道具 舉報

by123123 發表於 2018-6-15 11:02:04
1141444444444444

回覆 只看該作者 道具 舉報

byt87186 發表於 2018-6-15 11:00:48
謝謝                                

回覆 只看該作者 道具 舉報

bywaes3225 發表於 2018-6-15 10:59:45
THANK YOU

回覆 只看該作者 道具 舉報

1234下一頁
返回列表
Traffic Exchange Site
高級模式
B Color Image Link Quote Code Smilies
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

admin

文章分類

Contact us

歡迎您使用以下方式聯繫我們 , 本工作室服務時間為每日早上10:00點至晚間7:30點 ,也可點選下方 Contact us 進入留言板留下您的問題與相關聯絡資訊 , 我們將會儘快了解與回覆您。

SR數位設計工作室

  • 服務專線：03-3555-069


ECSHOP購物網站開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱：sr.design2011@gmail.com

本網站推薦使用以下瀏覽器 (請點擊圖式下載)

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

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

Core - DZ2.5　GMT+8, 2024-4-25 20:34

回頂部