手机端调用数字键盘 number、tel，输入过程中监听 input 变化事件

LazyLady
4,935 阅读4分钟
原文链接： www.yaya12.com

最近做手机端的提现功能，用于app的html5页面！再输入金额时需要调用手机端数字键盘，作为一个前端程序媛应该具备的素质，自然考虑该输入框只能输入数字和小数点，并且最多只能输入1个小数点，整数部分最多12位，小数部分最多2位，最好的用户体验就是输入过程中就看到相应的变化和文字提示！

一、经过一番调查，能够调用数字键盘的input属性除了number还有tel共两种类型。下面对两种类型做一番PK

1、输入过程中，对于数字的格式（最多只能输入1个小数点，整数部分最多12位，小数部分最多2位）控制，需要根据输入内容分析并截取之后，再次给改input进行赋值

html

<input type=”number” class=”js_diff_crash”  pattern=”\d+(\.\d*)?”   autofocus />

autofocus控制在打开页面的时候，改输入框默认选中出现光标；

同时，number类型的右侧会出现上下箭头（在不输入的情况下改变数字），但此样式影响界面显示，故需要引入下面css隐藏 

input[type=number]::-webkit-inner-spin-button,  
input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none; 
        appearance: none; 
        margin: 0; 
}
input[type="number"]{-moz-appearance:textfield;}

javascript

$('.js_diff_crash').on('keyup',function(){
    var crash_now_str=$(this).val();
    //如果输入为空展示全部提现
    if(crash_now_str.length==0){
      $(this).val('');
      $('.js_dd_grey').show().siblings('dd.errordd_tip').hide();
      $('.js_diff_sub_draw').hide();
      $('.js_diff_fail_draw').show();
      return false;
    }
    //字符长的时候减小字号
    if(crash_now_str.length&lt;=10){
      $(this).css('font-size','1.1rem');
    }else {
      $(this).css('font-size','0.8rem');
    }
    //将非.和数字的字符替换为空
    var crash_now_strend=crash_now_str.replace(/[^\.\d]/g,'');
    var crash_now_strend=crash_now_str;
    //整数部分最长12位start
    var crash_end_z=crash_now_strend.split('.')[0];
    //如果整数部分首位为0，则截取后买的 
    var crash_end_z_first=crash_end_z.substr(0,1);
    if(crash_end_z_first=='0'){
      crash_end_z=crash_end_z.substr(1);
    }
    if(crash_end_z.length&gt;12){
      crash_end_z=crash_end_z.substr(0,12);
    }   
    if(crash_now_strend.split('.').length&gt;1){
      var crash_end_l=crash_now_strend.split('.')[1].substr(0,2);
      crash_now_strend=(crash_end_z-0)+'.'+crash_end_l;
    }else{
      crash_now_strend=crash_end_z-0;
    }
    //整数部分最长12位end
    //控制输入长度后赋值并将该值转化为字符串格式
    $(this).val(crash_now_strend);   
  });

至此，一些如我们想象的完美进行，就算把number改成text，PC的输入在该逻辑之下也可以完美的进行。可危机往往隐藏的胜利之中，输入过程中，谷歌浏览器–当输入一个小数点之后，光标自动转移到小数点之前，无法保障数字的顺利输入；火狐浏览器–输入的小数点直接不显示。静下心来，做一个小测试

JavaScript 

$('.js_diff_crash').on('keyup',function(){
    var crash_now_str=$(this).val(); 
    var crash_now_strend=crash_now_str.replace(/[^\d.]/g,''); 
    console.log(crash_now_str);  
    console.log(crash_now_strend); 
    //将过滤后的字符再次赋值给该input 
    $(this).val(crash_now_strend);
  });

测试结果

139

仔细观察，会发现，再输入了“.”之后，number类型的value值是获取不到“.”的，经过我们js中的赋值后，自然会不展示“.”，谷歌还是卖给我们程序员们一分薄面了……如果取消赋值，会正常显示，但我们也将无法控制输入值的限制……

届于number的缺陷不能适应我们对于用户体验的需求，自然考虑用tel代替number，tel既可以识别“.”也可以调出手机端数字键盘，结果完全正常，我们再次进入欢庆胜利的节奏！~

2、完成后，我们将代码给个域名链接，在手机端浏览器打开……危机就再次悄无声息的探出头脑了——ios和某些andriod浏览器调出的键盘没有“.”键无法输入小数，参考下图

电话号码tel类型

144

IOS（左）和Android（右）的电话input的键盘

使用 tel input 类型时，iOS和Android都是提示显示拨号键盘，而不是标准键盘。

<input type=”tel” name=”tel”>

数字类型number

 IOS（左）和Android（右）的数字input的键盘 

number input 类型促使iOS显示数字和标点符号的键盘。Android浏览器将启动一个类似显示电话输入的键盘。

<input type=”number” name=”number”>

SO，tel也浇灭了我们的希望。如果要数字键盘，则无法实现数字的完美控制；如果要数字的完美控制，a自己用代码编写一个键盘界面（耗时久）b采用text调用通用键盘；在用户体验输入至上以及时间的考虑下，暂时用text属性，数字键盘的制作放于下一个迭代。本以为完美的对这个曲折的路程宣告结束了，可是……

二、换用text属性后，在中文键盘中可以把中文打印进去，即便在PC输入中文，用鼠标点击选中也可以输入中文~~~~(>_<)~~~~，由于这种输入中文的形式不受keyup事件的控制，于是又得开启一番限制中文输入的bug大战……

1、找到这种输入中文的事件–无果，向下进行

2、找到输入过程中value值发生变化的事件

2.1 change事件，但是change事件要在input失焦后发生，比blur还要晚，只能排除

2.2 皇天不负有心人，发现一合适的事件input，该事件就是监听输入过程中文字内容变化的事件，之前常备用于监听输入框中的文字数目限制，比如150个字倒计数……

input兼容性图——目前来说除了IE89以外，其它浏览器支持的都还是不错的，在移动端可以放心的用了

至此，终于皆大欢喜，可以调整文字控制，整体代码又不大，只需要替换“keyup”这5个字符即可。是开心了，可也感受到了无知。希望看到该文章的大牛们，可以给一些更好的建议！~

avatar
文章
阅读
粉丝