text类型输入框实现0.1步长、禁字符、自定义最值限制功能求助

问题分析 #

原代码核心问题出在条件判断逻辑与参数使用错误，具体问题如下：

• 多判断条件误用&&连接，只有同时满足所有非法条件才会阻止输入，实际只要触发任意一条非法规则就应该阻止输入
• 范围判断硬编码为1~5，没有使用传入的low和high入参，参数配置不生效
• 未兼容退格、删除、方向键、Tab等合法功能按键的输入场景
• 未处理空值、仅输入小数点等边界场景的数值校验

修正后代码 #

JS代码 #

function myFunction(e, low, high) {
  // 允许的功能按键：退格、删除、方向键、Tab、小数点
  const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', '.'];
  if (allowedKeys.includes(e.key)) {
    // 额外判断小数点不能重复输入
    if (e.key === '.' && e.target.value.includes('.')) {
      e.preventDefault();
    }
    return;
  }

  // 禁止输入非数字字符
  if (!/^\d$/.test(e.key)) {
    e.preventDefault();
    return;
  }

  // 拼接输入后的值
  const nextValue = e.target.value + e.key;
  // 校验精度：最多1位小数
  if (!/^(\d+)?([.]?\d{0,1})?$/.test(nextValue)) {
    e.preventDefault();
    return;
  }

  // 校验数值范围，排除空值、仅输入小数点的场景
  const numValue = parseFloat(nextValue);
  if (!isNaN(numValue) && (numValue < low || numValue > high)) {
    e.preventDefault();
  }
}

HTML代码 #

<!DOCTYPE html>
<html>
<body>
<form name="addtext">
  SetPoint :<input id="setPoint" type="text" name="setPoint" onkeydown="myFunction(event,3, 5)" /><br />
</form>
</body>
</html>

验证说明 #

修正后完全符合要求的规则：

• 精度限制为0.1，最多只能输入1位小数
• 仅允许输入数字和一个小数点，字母等特殊字符会被拦截
• 最小值、最大值通过函数入参配置即可生效，示例入参3和5代表仅允许输入3~5之间的数值
• 保留了功能按键的正常使用，不会影响正常的输入编辑操作

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