作者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/cn.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