移动端H5输入框只能输入数字的最好体验

一开始我是这样写的：

<input  type="number" />

 

安卓手机只能输入数字，但是苹果手机还是可以通过切换输入法输入非数字

然后我这样写：

<input  type="tel" />

然后苹果手机只能输入数字，但是安卓手机可以输入非数字

 

所以判断手机是安卓还是IOS来渲染输入框（以下是vue写法，反正思想你肯定懂了）

<input v-if="isIOS"  type="tel" />
<input v-else  type="number" /> 

 

 

附上判断安卓还是IOS的方法

function isIOS() {
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        return true
    } else {
        return false
    }
}

function isAndroid() {
    if (/(Android|Adr)/i.test(navigator.userAgent)) {
        return true
    } else {
        return false
    }
}