为何按逗号键时jQuery无法获取number类型输入框的值？

这个问题的核心原因和type="number"输入框的内置行为直接相关，咱们一步步拆解清楚：

为什么按下逗号时拿不到值？ #

• number输入框的过滤机制：浏览器对type="number"的输入框有严格的输入限制，只会接受合法的数字字符（0-9、正负号、小数点，不同浏览器细节略有差异）。逗号（,）不属于合法的数字输入，所以当你按下逗号时，浏览器会直接忽略这个输入，不会将逗号写入输入框的value属性中。这时候调用$(this).val()自然拿不到包含逗号的新值，甚至连原有值都不会变化。
• 事件触发的时机问题：你绑定的事件里，change、propertychange这类事件只有当输入框的实际值发生变化时才会触发，而逗号根本没被输入进去，所以这些事件不会触发；keyup事件虽然会触发，但此时输入框已经过滤掉了逗号，value还是之前的状态，所以打印的还是旧值。

怎么解决？ #

根据你的实际需求，分两种情况处理：

情况1：只是想捕获逗号按键的行为（不需要把逗号输入到框里） #

如果只是要检测用户按下了逗号键，不需要修改输入框内容，可以把事件换成keydown或者keypress，这两个事件在按键按下的瞬间触发，早于浏览器对输入框的过滤操作：

$(':input[type="number"]').on('keydown', function(e) {
  // 更推荐用e.key === ','替代keyCode，keyCode已被废弃
  if(e.key === ',') {
    console.log("逗号键被按下了");
    console.log("当前输入框现有值：", $(this).val());
  }
});

情况2：需要允许输入逗号（比如作为千分位分隔符） #

这种情况下，type="number"就不适用了，因为它天然不支持非数字字符。建议换成type="text"，然后自己处理输入的格式验证和格式化：

<input type="text" class="number-input">

$('.number-input').on('input paste keyup', function(e) {
  let currentVal = $(this).val();
  if(e.key === ',') {
    console.log("输入了逗号，当前值：", currentVal);
  }
  // 可选：如果需要将输入转换为规范数字格式，可以在这里自定义处理逻辑
});

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