最近因為碩論招募受試者，需要先進行一些測驗篩選，所以架了個網站，
讓志願者可以註冊帳號，線上測驗。
其中註冊表單中的電話欄位<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;
...
好奇各位大大有沒有類似的經驗呢？
又有甚麼解決方案呢？

前端大概就這解法了 不然就後端處理 但我會選不加-

加了要幹嘛 要render出來時再自己格式化就好

不應該加-，或者說不應該叫使用者輸入 -使用者應該只要輸入數字，顯示格式是你自己要在相對位置加-

如果是資料量大的網站 後端應該會叫說為何要多存三個-

正規多判斷0到1個- 我都這樣判斷有時候User還會輸入(XX)XXXX-XXXX我都強制規定只能使用-或是#(分機)

我是用jquery mask這個套件來處理

像信用卡, 輸入純數字 (自動加 - 只是方便閱讀)

前端自動加-是方便使用者閱讀，但資料送進後端，如果是我的話，會再把-拿掉再存進去，就資料儲存來講，比較直覺，而且不用多儲存三個字元

真的想做的話可以這樣 https://is.gd/Xxer6n不過這是IE8時代的產物，我不確定它是否可以用在手機上

加-搞不好還會有使用者打成全形的

千萬不要加 - ,前端越單純越好