input移动端type=''number''不生效_elment type number手机端不适配-CSDN博客

本文链接：https://blog.csdn.net/Angel_girl319/article/details/103203973

在苹果手机上遇到input类型为'number'时无法正常调起数字键盘的问题。通过添加pattern属性并设置兼容iOS的正则表达式'[0-9]*'或'd*'，可以解决该兼容性问题。以银行卡号输入校验为例，介绍了这种方法在实际开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做项目中偶然发现在苹果手机 input=“number”不兼容，产品硬要求要调起数字键盘，只能输入数字，下面是我的解决方法

<input  type="number"  value="" pattern="[0-9]*" onBlur="checkOnValChangedLR(this);"  onkeyup="this.value=this.value.replace(/[, ]/g,'')" oninput="if(value.length>11)value=value.slice(0,11)" >

其实在代码中最重要的代码是兼容ios的是pattern="[0-9]*"，有的博客写 pattern="\d*" 也是可以的

下面是我在开发中检验银行卡校验的例子


<input id="inputBank" type="text"  placeholder="银行卡号仅支持输入数字" onKeyUp="value=value.replace(/\D/g,'')" onafterpaste="value=value.replace(/\D/g,'')" />

<script>
    //判断是否是数字
    function isNumber(num){
	    var reg = new RegExp("^[0-9]*$");
	    if(!reg.test(num)){
        return false;
    }
	return true;
    }
    //校验银行账号
    function checkBank(account){
	   var reg=/^(\d{16}|d{17}|\d{19})$/;
	    if(!reg.test(account)){
		    //alert("请输入16位或19位数字的银行账号");
		    	return false;
		    } else {
			return true;
		 }
    }
    $(function(){
        var inputBank = $("#inputBank").val() ;
        //数字校验
	    if(!isNumber(inputBank)) {
	        showTipMsg("银行卡号仅支持输入数字!");
	        return false;
	    }
	    //16-19位数字校验
	     if(!checkBank(inputBank)){
		 	showTipMsg("请输入16位或19位数字的银行账号！");
		 	return false;
		}
    })
</script>