PTT數位生活區 / Web_Design

[討論] 表單電話欄位的輸入格式

看板Web_Design作者 (小郭郭)時間5年前 (2019/06/25 19:59), 5年前編輯推噓7(7推 0噓 10→)
留言17則, 10人參與, 5年前最新討論串1/1
最近因為碩論招募受試者，需要先進行一些測驗篩選，所以架了個網站， 讓志願者可以註冊帳號，線上測驗。 其中註冊表單中的電話欄位<input type='tel' id='mobilePhone'> 為了讓格式整齊，所以限制使用者只能輸入09xx-xxx-xxx的形式 沒想到，有 iphone / safari 的使用者跟我說，電話欄位的鍵盤沒辦法輸入 "-" 讓我驚訝不已XD 無奈只好寫個函式來幫忙加 hyphen ... function addHyphen() { let re = /(\d{4})(\d{3})(\d{3})/; if (!this.value.search(re)) this.value = this.value.replace(re, '$1-$2-$3'); } ... document.querySelector('#mobilePhone').oninput = addHyphen; ... 好奇各位大大有沒有類似的經驗呢？ 又有甚麼解決方案呢？ -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 140.112.4.209 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1561463949.A.8EA.html
→
06/25 20:18, 5年前 , 1F
前端大概就這解法了 不然就後端處理 但我會選不加-
06/25 20:18, 1F
為什麼選擇不加 "-" 呢？ ※ 編輯: jack82822005 (140.112.4.209 臺灣), 06/25/2019 20:48:50
推
06/25 21:09, 5年前 , 2F
加了要幹嘛 要render出來時再自己格式化就好
06/25 21:09, 2F
推
06/25 21:25, 5年前 , 3F
不應該加-，或者說不應該叫使用者輸入 -
06/25 21:25, 3F
→
06/25 21:26, 5年前 , 4F
使用者應該只要輸入數字，顯示格式是你自己要在相對位置加-
06/25 21:26, 4F
→
06/25 23:48, 5年前 , 5F
如果是資料量大的網站 後端應該會叫說為何要多存三個-
06/25 23:48, 5F
推
06/26 08:20, 5年前 , 6F
正規多判斷0到1個- 我都這樣判斷
06/26 08:20, 6F
→
06/26 08:21, 5年前 , 7F
有時候User還會輸入(XX)XXXX-XXXX
06/26 08:21, 7F
→
06/26 08:21, 5年前 , 8F
我都強制規定只能使用-或是#(分機)
06/26 08:21, 8F
推
06/26 19:28, 5年前 , 9F
我是用jquery mask這個套件來處理
06/26 19:28, 9F
→
06/26 20:02, 5年前 , 10F
像信用卡, 輸入純數字 (自動加 - 只是方便閱讀)
06/26 20:02, 10F
推
06/27 01:45, 5年前 , 11F
前端自動加-是方便使用者閱讀，但資料送進後端，如果是我
06/27 01:45, 11F
→
06/27 01:45, 5年前 , 12F
的話，會再把-拿掉再存進去，就資料儲存來講，比較直覺，
06/27 01:45, 12F
→
06/27 01:45, 5年前 , 13F
而且不用多儲存三個字元
06/27 01:45, 13F
推
06/27 19:56, 5年前 , 14F
真的想做的話可以這樣 https://is.gd/Xxer6n
06/27 19:56, 14F
→
06/27 19:58, 5年前 , 15F
不過這是IE8時代的產物，我不確定它是否可以用在手機上
06/27 19:58, 15F
推
06/27 20:50, 5年前 , 16F
加-搞不好還會有使用者打成全形的
06/27 20:50, 16F
→
06/30 18:36, 5年前 , 17F
千萬不要加 - ,前端越單純越好
06/30 18:36, 17F
‣ 更多 jack82822005 的文章
文章代碼(AID): #1T4WoDZg (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 jack82822005 的文章
文章代碼(AID): #1T4WoDZg (Web_Design)