安卓移动端数字键盘屏蔽加减

最新推荐文章于 2024-08-04 03:30:30 发布

小白路过

最新推荐文章于 2024-08-04 03:30:30 发布

阅读量633

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Bekind2010/article/details/93878440

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

需求场景

在手机端呼起数字键盘，在设置了type="number"之后，其实任然可以输入+, -；产品希望能够只输入数字和小数点，不要输入加减号。

开发时，首先想到的是在keydown中监听当前输入的键值，如果不是0到9或者小数点，就不允许输入，其他则不允许。于是写出了以下代码

$('#input-dom').on('keydown', function(e){
  if (
    e.key &&
    e.key.match(/[^\d\.]/)
  ) {
    return false;
  }
})

这样写，的确是不能输入加减号了，但是连删除和左右移动等控制键也无法输入了，这就有点不合适了。如果把控制键放出来，又担心兼容性问题，如果放的不全面，那有些手机无法删除，这个后果稍稍有点严重，所以就pass了。

其实在数字键盘下，很多字符其实系统已经限制了，于是就想到只限制加减吧

$('#input-dom').on('keydown', function(e){
  if (
      // 有些手机 e.key 默认为undefined
      (e.key && e.key.match(/[-\+]/)) ||
      (e.keyCode &&
       (e.keyCode == 69 ||
        e.keyCode == 187 ||
        e.keyCode == 189))
    ) {
      return false;
    }
})

初步效果是好的，在电脑上和我的测试机（魅族）上是可以限制输入的。但是测试同学测试时，说根本没限制，跑过去看了下，测试是华为手机，确实是没限制住，当时我的内心……

控制台打印，发现不管输入什么字符，部分安卓手机（华为、小米）端在keydown事件里返回的keyCode一直是229，一阵狂汗……，这个操作我也很无语

有些手机（魅族）能正常返回和电脑端一致的keyCode,针对这种手机或电脑端，使用keydown

然后网上找了下，发现在textInput事件中，能准确获取到当前输入的字符，我也不确定是否还有别的兼容性，只能遇见了再解决吧。初步解决方案如下

$("#input-dom").on("textInput keypress keydown", function(e) {
  try {
    //针对不识别keyCode
    //有些手机 e.key 默认为undefined
    var char = e.originalEvent.data;
    if (char && char.match(/[-\+]/)) {
      return false;
    } else if (
      // 识别keyCode的
      (e.key && e.key.match(/[-\+]/)) ||
      (e.keyCode &&
       (e.keyCode == 69 ||
        e.keyCode == 187 ||
        e.keyCode == 189))
    ) {
      return false;
    }
  } catch (error) {
    console.error("输入校验错误：", error.message);
  }
});