在使用表单元素的时候,input输入框是很常见的,在输入手机号等只需使用数字并且对输入长度有需求的时候,就会发现,input本身所具有的属性真是太令人又爱又恨了,哈哈哈!
只输入数字时,你可能会想,让input 的类型为number不就好了吗?是呀,可惜,ios不怎么听话,需要限制长度时,你可能又会想,input不是有个maxlength属性吗?有啊,但当type=number的时候,各个系统都很叛逆,都跟你对着干,这个时候,你会想什么呢?
再进一步思考的时候,限制长度的时候,有空格怎么办呢?如果是复制粘贴的空格,又该如何处理呢?
这一刻,有没头变大的感觉,哈哈哈!!!
当这几项需要组合的时候,感觉应该是不太好的,经过认真的思考,实践,从坑里爬起来之后,反思,还是挺简单的,嘿嘿!
一步一步来,首先,如果只想调数字键盘,那么考虑到平台兼容性,首先,要从输入框的类型入手,安卓支持number,苹果不支持,这种情况下,也就是说,输入框的类型要区分平台判断,type=platform == android ? number : text ,有了这个之后,只能调取数字键盘,ios怎么办呢?这个时候,就能想到,input还有一个属性叫pattern,当pattern="[0-9]*"时,到此,双平台的,只调数字键盘就完成了。
接下来,是限制长度了,如果只是手动输入的话,那还是好处理的,但如果需要粘贴内容的时候,问题就来了,在vue.js为前端栈的前提下,暂时未发现有afterpaste的事件,只有@paste事件,并且平台,系统差异性大,有些会去除空格,有些会保留,既然是这样的,那我们就考虑求同吧,直接判断,有空格,先处理成无空格的,再来显示,这样,就大功告成啦,当然,在@paste事件中,请记得阻止默认事件,否则,可能会哭!
input输入数字且有长度限制的兼容方案
最新推荐文章于 2023-12-08 11:48:16 发布