[讨论] 表单电话字段的输入格式

楼主: jack82822005 (小郭郭)   2019-06-25 19:59:06
最近因为硕论招募受试者,需要先进行一些测验筛选,所以架了个网站,
让志愿者可以注册帐号,线上测验。
其中注册表单中的电话字段<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;
...
好奇各位大大有没有类似的经验呢?
又有什么解决方案呢?
作者: kurtisgod (蹦蹦蹦)   2019-06-25 20:18:00
前端大概就这解法了 不然就后端处理 但我会选不加-
作者: vi000246 (Vi)   2019-06-25 21:09:00
加了要干嘛 要render出来时再自己格式化就好
作者: shter (飞梭之影)   2019-06-25 21:25:00
不应该加-,或者说不应该叫使用者输入 -使用者应该只要输入数字,显示格式是你自己要在相对位置加-
作者: kurtisgod (蹦蹦蹦)   2019-06-25 23:48:00
如果是资料量大的网站 后端应该会叫说为何要多存三个-
作者: bill0205 (善良的小孩没人爱)   2019-06-26 08:20:00
正规多判断0到1个- 我都这样判断有时候User还会输入(XX)XXXX-XXXX我都强制规定只能使用-或是#(分机)
作者: nottt (无)   2019-06-26 19:28:00
我是用jquery mask这个套件来处理
作者: newversion (海纳百川)   2019-06-26 20:02:00
像信用卡, 输入纯数字 (自动加 - 只是方便阅读)
作者: my1938 (不知道该说什么)   2019-06-27 01:45:00
前端自动加-是方便使用者阅读,但资料送进后端,如果是我的话,会再把-拿掉再存进去,就资料储存来讲,比较直觉,而且不用多储存三个字符
作者: eight0 (欸XD)   2019-06-27 19:56:00
真的想做的话可以这样 https://is.gd/Xxer6n不过这是IE8时代的产物,我不确定它是否可以用在手机上
作者: oToToT (屁孩)   2019-06-27 20:50:00
加-搞不好还会有使用者打成全角的
作者: kattte (诚实面对自己吧!)   2019-06-30 18:36:00
千万不要加 - ,前端越单纯越好

Links booklink

Contact Us: admin [ a t ] ucptt.com