作者jack82822005 (小郭郭)
看板Web_Design
標題[討論] 表單電話欄位的輸入格式
時間Tue Jun 25 19:59:06 2019
最近因為碩論招募受試者，需要先進行一些測驗篩選，所以架了個網站，
讓志願者可以註冊帳號，線上測驗。
其中註冊表單中的電話欄位<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://webptt.com/m.aspx?n=bbs/Web_Design/M.1561463949.A.8EA.html
1F：→ kurtisgod: 前端大概就這解法了 不然就後端處理 但我會選不加- 06/25 20:18
為什麼選擇不加 "-" 呢？
※ 編輯: jack82822005 (140.112.4.209 臺灣), 06/25/2019 20:48:50
2F：推 vi000246: 加了要幹嘛 要render出來時再自己格式化就好 06/25 21:09
3F：推 shter: 不應該加-，或者說不應該叫使用者輸入 - 06/25 21:25
4F：→ shter: 使用者應該只要輸入數字，顯示格式是你自己要在相對位置加- 06/25 21:26
5F：→ kurtisgod: 如果是資料量大的網站 後端應該會叫說為何要多存三個- 06/25 23:48
6F：推 bill0205: 正規多判斷0到1個- 我都這樣判斷 06/26 08:20
7F：→ bill0205: 有時候User還會輸入(XX)XXXX-XXXX 06/26 08:21
8F：→ bill0205: 我都強制規定只能使用-或是#(分機) 06/26 08:21
9F：推 nottt: 我是用jquery mask這個套件來處理 06/26 19:28
10F：→ newversion: 像信用卡, 輸入純數字 (自動加 - 只是方便閱讀) 06/26 20:02
11F：推 my1938: 前端自動加-是方便使用者閱讀，但資料送進後端，如果是我 06/27 01:45
12F：→ my1938: 的話，會再把-拿掉再存進去，就資料儲存來講，比較直覺， 06/27 01:45
13F：→ my1938: 而且不用多儲存三個字元 06/27 01:45
15F：→ eight0: 不過這是IE8時代的產物，我不確定它是否可以用在手機上 06/27 19:58
16F：推 oToToT: 加-搞不好還會有使用者打成全形的 06/27 20:50
17F：→ kattte: 千萬不要加 - ,前端越單純越好 06/30 18:36