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

[jack82822005 (小郭郭)]

最近因為碩論招募受試者，需要先進行一些測驗篩選，所以架了個網站，
讓志願者可以註冊帳號，線上測驗。

其中註冊表單中的電話欄位<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
→ kurtisgod: 前端大概就這解法了  不然就後端處理  但我會選不加-
為什麼選擇不加 "-" 呢？
※ 編輯: jack82822005 (140.112.4.209 臺灣), 06/25/2019 20:48:50
推 vi000246: 加了要幹嘛 要render出來時再自己格式化就好
推 shter: 不應該加-，或者說不應該叫使用者輸入 -
→ shter: 使用者應該只要輸入數字，顯示格式是你自己要在相對位置加-
→ kurtisgod: 如果是資料量大的網站  後端應該會叫說為何要多存三個-
推 bill0205: 正規多判斷0到1個- 我都這樣判斷
→ bill0205: 有時候User還會輸入(XX)XXXX-XXXX
→ bill0205: 我都強制規定只能使用-或是#(分機)
推 nottt: 我是用jquery mask這個套件來處理
→ newversion: 像信用卡, 輸入純數字 (自動加 - 只是方便閱讀)
推 my1938: 前端自動加-是方便使用者閱讀，但資料送進後端，如果是我
→ my1938: 的話，會再把-拿掉再存進去，就資料儲存來講，比較直覺，
→ my1938: 而且不用多儲存三個字元
推 eight0: 真的想做的話可以這樣 https://is.gd/Xxer6n
→ eight0: 不過這是IE8時代的產物，我不確定它是否可以用在手機上
推 oToToT: 加-搞不好還會有使用者打成全形的
→ kattte: 千萬不要加 - ,前端越單純越好