如何用JavaScript禁止用户在输入框输入小数？报错求助

嘿，我来帮你搞定这个禁止输入小数的问题！你当前的代码有几个小问题，既导致了报错，又没法实现你想要的功能，咱们一步步来修正：

1. 事件绑定逻辑重复了 #

你现在的写法是在输入框的onkeypress里调用checkDecimal()，但这个函数又去给元素重新绑定keypress事件——这会导致每按一次键就多绑定一次事件，不仅浪费资源，还会引发各种奇怪的行为。咱们直接在checkDecimal里处理当前的按键就好，不需要二次绑定。

2. 选择器没匹配到目标元素 #

你的输入框class是line_qty_class，但JavaScript里用了.line_qty，根本选不到你要控制的输入框，这也是功能失效的核心原因之一。

3. 按键判断逻辑写反了 #

你当前的条件会阻止所有非数字和小数点的按键，但你要禁止的是小数，所以应该只允许数字0-9，同时放行退格、方向键这类控制键，阻止小数点和其他非数字按键。

修正后的代码（直接在HTML绑定事件的写法） #

HTML部分

把onkeypress改成传递事件对象，这样函数里能直接拿到当前按键信息：

<td>
  <form:input class="form-control line_qty_class inputs" onkeypress="return checkDecimal(event);" required="required" id="line_qty${loop.index}" path="saleInvoiceLines[${loop.index}].quantity" />
</td>

JavaScript部分

重写checkDecimal函数，直接处理按键逻辑：

function checkDecimal(e) {
  // 放行退格、Tab、左右方向键这类控制键，方便用户编辑
  const allowedControlKeys = [8, 9, 37, 39];
  if (allowedControlKeys.includes(e.which)) {
    return true;
  }
  // 只允许0-9的数字按键，其他（包括小数点）都阻止
  if (e.which < 48 || e.which > 57) {
    showAdvice(e.target, "Enter Integer Value");
    return false;
  }
  return true;
}

更优雅的写法（JS和HTML分离） #

如果你想让代码结构更清晰，推荐用jQuery把事件绑定和HTML分开，这样HTML里不用写内联事件：

HTML部分

<td>
  <form:input class="form-control line_qty_class inputs" required="required" id="line_qty${loop.index}" path="saleInvoiceLines[${loop.index}].quantity" />
</td>

JavaScript部分

// 等页面DOM加载完成后再绑定事件
$(document).ready(function() {
  $(".line_qty_class").on("keypress", function(e) {
    // 放行控制键
    const allowedControlKeys = [8, 9, 37, 39];
    if (allowedControlKeys.includes(e.which)) {
      return true;
    }
    // 只允许数字输入
    if (e.which < 48 || e.which > 57) {
      showAdvice(this, "Enter Integer Value");
      return false;
    }
    return true;
  });
});

关于你遇到的语法报错 #

那个Syntax error on token "_$tag____________", invalid AssignmentOperator的报错，大概率是IDE解析JSP标签时的误报（毕竟你写的path="saleInvoiceLines[${loop.index}].quantity"是标准的JSP EL表达式）。等你修正完上面的JS逻辑，功能正常运行后，这个报错应该会自动消失。

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