input . type=number.使用后问题点

所有主浏览器都支持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);
 
//提交
oBtn.onclick=function(){
  if(!oVal && oVal!="0"){
    alert("请输入数字");
  }else if(oVal/1<minNum/1){ //把他们转化为 Number类型  
    alert("小于"+minNum);
  }else if(oVal/1 <=maxNum/1){
    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支持的不是那么好。。。
 

 

 

      

 

posted @ 2017-08-23 17:07  铁塔  阅读(9238)  评论(1编辑  收藏  举报