如何让数量输入框禁止小数输入并自动执行math.floor取整？

嘿，我来帮你搞定这个数量输入框的需求！咱们要实现三个核心功能：禁止输入小数点、自动把带小数的数值向下取整、只允许输入0-9的数字字符。下面是完整的解决方案，分HTML和JavaScript两部分：

第一步：HTML结构 #

咱们保留你原来的input标签就行，不用改结构：

<input class="quantity" type="text" value="1">

第二步：JavaScript逻辑 #

我写了两段事件监听代码，分别处理键盘输入拦截和输入内容的自动修正，覆盖了手动输入、粘贴等所有场景：

const quantityInput = document.querySelector('.quantity');

// 拦截键盘输入，禁止非数字字符（保留必要的控制键）
quantityInput.addEventListener('keydown', function(e) {
  // 允许的按键：数字（含小键盘）、退格、删除、方向键、Tab
  const allowedKeys = ['0','1','2','3','4','5','6','7','8','9',
                       'Backspace','Delete','ArrowLeft','ArrowRight','Tab'];
  
  // 小键盘数字的key值是"0"到"9"，直接判断即可
  if ((e.key >= '0' && e.key <= '9') || allowedKeys.includes(e.key)) {
    return; // 允许输入
  }
  
  e.preventDefault(); // 阻止其他所有按键（比如小数点、字母、符号）
});

// 处理输入/粘贴后的内容，自动修正为向下取整的整数
quantityInput.addEventListener('input', function() {
  let inputValue = this.value.trim();
  
  // 如果输入为空，恢复默认值1
  if (!inputValue) {
    this.value = '1';
    return;
  }
  
  // 把输入内容转成数字后向下取整
  const integerValue = Math.floor(Number(inputValue));
  
  // 确保最终值是正整数（如果是负数就设为1，也可以改成0，看你需求）
  this.value = integerValue >= 0 ? integerValue.toString() : '1';
});

功能说明 #

• 禁止输入小数点：通过keydown事件直接拦截小数点按键，用户根本没法输入小数点；
• 自动处理小数：不管是手动输入了带小数点的内容（比如不小心粘贴了"3.4"），都会被转成Math.floor(3.4)也就是3；
• 仅允许数字：除了0-9的数字和必要的控制键，其他字符（字母、符号等）都无法输入；
• 空值处理：如果用户把内容删空，会自动恢复默认值1，避免输入框为空。

你可以直接把这段代码放到你的项目里测试，要是需要调整默认值或者允许输入0的话，改一下input事件里的逻辑就行~

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