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

一、能够调用数字键盘的 input 属性除了 number 还有 tel 共两种类型

下面对两种类型做一番 PK

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

<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;
}

$('.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<=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 的输入在该逻辑之下也可以完美的进行。可危机往往隐藏的胜利之中，输入过程中，谷歌浏览器–当输入一个小数点之后，光标自动转移到小数点之前，无法保障数字的顺利输入；火狐浏览器–输入的小数点直接不显示。静下心来，做一个小测试

$(".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);
});

测试结果

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

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

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

电话号码 tel 类型

• IOS（左）和 Android（右）的电话 input 的键盘
• 使用 tel input 类型时，iOS 和 Android 都是提示显示拨号键盘，而不是标准键盘。

• number input 类型促使 iOS 显示数字和标点符号的键盘。Android 浏览器将启动一个类似显示电话输入的键盘。
• 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 个字符即可。是开心了，可也感受到了无知。希望看到该文章的大牛们，可以给一些更好的建议！~