所有主浏览器都⽀持type属性，但是，并⾮所有主流浏览器都⽀持所有不同的 input 类型。
以下 input 类型是 HTML5 中的新类型：color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url。
这⾥只说 type=number 类型。
（来⾃菜鸟）【Internet Explorer 9 及更早 IE 版本不⽀持 type="number"；很遗憾的是⽕狐浏览器并不⽀持type=number 】
在使⽤的过程中遇到的问题，
1.Android版app。
  集成的内核是⽀持type=number类型。调出的软键盘是数字键盘。【符合预期】
  问题：1.字母e由于是计数的⼀种，是可以输⼊的;
    2.字母e通过value取值时是取不到的;[是数学但不是数字，有点 ]
    3.当输⼊字母时，通过value取值返回的是“”空字符串，输⼊框是字母e.
      相对来说，兼容性还是很好的。
2.IOS版app
  集成的webkit内核，⽐较奇怪的是，只调出了数字键盘，和原⽣调出的数字键盘并不是同⼀个。======请⼤⽜ 指点啊，评论
  问题：1.任何字符都可以输⼊，type=number在输⼊阶段没有做任何校验；
    　2.通过value取值时返回的是。。。。。，这个我需要确认⼀下。
    离预期差的不是⼀站地的距离。
⼀时没有想出好的解决⽅案，【1.点击input框时调取数字键盘；2.不可以输⼊字母；3.保留两个⼩数点】
<input type="number" id="oInput" placeholder="请输⼊数字">
<input type="button" value="提交"  id="oBtn">
var oInput = document.querySelector("oInput");
var oBtn = document.querySelector("oBtn");
var maxNum = 2000;
var minNum = 5;
var oVal;
oInput.addEventListener('blur', function() {
this.value = this.value>=0?parseFloat(this.value).toFixed(2):parseFloat(this.value);
  oVal = this.value;      //处理后得到的结果：数值和NaN
}, false);
//提交
  if(!oVal && oVal!="0"){
    alert("请输⼊数字");
  }else if(oVal/1<minNum/1){ //把他们转化为 Number类型
    alert("⼩于"+minNum);
  }else if(oVal/1 <=maxNum/1){input标签placeholder属性
    alert("你输⼊的是"+oVal);
    location.href="a.php?val="+oVal;
  }else{
    alert("不得超过"+maxNum);
    oInput.value = maxNum;
  }
}
//这样就实现了在type=number时:  1.取得数值的⽬的  2.取得的值和输⼊框内显⽰的统⼀。
这⾥⾯要注意⼏点：1.取回来的值都是字符串类型，⽐较前先转化为Number类型；【"100" 与 "2" 谁⼤， 不好说】
        　2.if判断，相互之间不能有冲突或者重合【第⼀点击按钮正常，第⼆次点击按钮没有反应】
        　3.当输⼊框和按钮很近时，直接点击提交按钮软键盘不⾃动收起；
            1.可以采⽤失去焦点blur事件；
            2.blur事件触发，⼀定在确认跳转之后；
            3.防⽌点击取消跳转，再次点击按钮⽆反应。
求⼤神分享只输⼊数字的做法和代码～～～
另⼀个不明⽩的地⽅是，appIOS版本对type=number⽀持的不是那么好。。。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。