jQuery输入框数值限制if条件对2-9数字失效问题排查

嘿，这问题我熟！你的代码里藏着一个很容易踩的JS小坑——字符串与数字的比较逻辑差异。

问题根源 #

$(this).val()获取到的是输入框的内容，它的类型是字符串，而你定义的LowerLimit和UpperLimit是数字类型。当JS进行不同类型的比较时，会按字符串的字典序来对比，而不是数值大小：

• 比如输入"9"，和数字10比较时，JS会把10转成字符串"10"，然后对比第一个字符："9"的ASCII码比"1"大，所以"9" < 10会返回false，自然不会触发把值改成10的逻辑。
• 而像输入"10"或者"0"时，字符串对比的结果刚好和数值对比一致，所以看起来正常。

修复方案 #

只需要把获取到的输入值转换成数字类型再进行比较就行，同时建议加上非数字输入的处理（比如用户输入字母或空内容）：

$(function(){ 
  $('input').blur(function(){ 
    var LowerLimit = 10; 
    var UpperLimit = 70; 
    // 把字符串转成整数，第二个参数10是指定十进制，避免意外的八进制解析
    var CurrVal = parseInt($(this).val(), 10); 

    // 处理非数字输入或数值小于下限的情况
    if (isNaN(CurrVal) || CurrVal < LowerLimit) { 
      $(this).val(LowerLimit); 
    } 
    // 处理数值大于上限的情况
    else if (CurrVal > UpperLimit) { 
      $(this).val(UpperLimit); 
    } 
  }); 
});

如果你的输入框允许小数，把parseInt换成parseFloat或者Number()就可以啦，比如：

var CurrVal = parseFloat($(this).val());
// 或者
var CurrVal = Number($(this).val());

这样修改后，不管输入2-9还是其他数值，都会按真实的数值大小来判断，逻辑就完全符合预期了～

内容的提问来源于stack exchange，提问作者CK Leow