从零开始制作一个兼容双移动端的数字输入框
in 后端 with 0 comment

从零开始制作一个兼容双移动端的数字输入框

in 后端 with 0 comment

需求

  1. 一个移动端的数字输入框
  2. 最多只能输入4位[0-9]的数字

0x01 显示数字键盘

首先为了能够打开移动端的数字键盘,我们使用type=number的input

<input id="num" type="number" maxlength="4" size="4" autocomplete="false">

这时候会发现在Android中已经可以弹出数字键盘了,而在Ios中却还无法调出数字键盘。

兼容Ios的写法为: 加上**pattern="[0-9]"*

<input id="num" type="number" maxlength="4" size="4" autocomplete="false" pattern="[0-9]*">

此时已经可以在Ios中正确显示数字键盘了。

0x02 限制4位字符长度

当添加pattern="[0-9]*"后,我们会发现maxlength和size属性失效了。

此时可以通过input的oninput事件来监听输入,在input内容长度超过4时只保留前4位

代码如下:

<input id="num" type="number" maxlength="4" size="4" autocomplete="false" pattern="[0-9]*" oninput="if(value.length>4)value=value.slice(0,4);">

0X03 过滤+-.e等特殊内容

在传统Android键盘中,可以通过返回、输入法设置菜单切换到其他类型键盘中,此时可以输入+-.e之类的内容来越过pattern的限制。

其实还是可以通过在oninput中添加判断来过滤字符。

<input id="num" type="number" maxlength="4" size="4" autocomplete="false" pattern="[0-9]*" oninput="if(value.length>4)value=value.slice(0,4);value=value.replace(/[^\[0-9\]]/g,'')">

0X04 最终成品图

Android效果图:

Android.jpg

Ios效果图:

Ios.jpg

Comments are closed.