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

2017-05-21 loading

最近做手机端的提现功能,用于 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 个字符即可。是开心了,可也感受到了无知。希望看到该文章的大牛们,可以给一些更好的建议!~