如何在提交type=number输入框值时正确拼接前缀03

直接修改type="number"输入框的value拼接字符串前缀无法生效，核心原因是number类型输入框仅接受合法数值格式内容，给其赋值非纯数字格式的字符串时，浏览器会自动校验过滤非法值，直接清空或修正输入框内容，导致拼接操作失效。
同时原代码的表单绑定存在bug：onsubmit="ipFunction()"没有接收函数返回值，会导致提交控制逻辑不生效。

全程不修改number输入框的类型、属性、交互逻辑，保留原生上下调节按钮、min/max范围校验能力，通过临时新增隐藏同名字段传值的方式实现带前缀提交，完全符合约束要求。

修正后代码 #

HTML部分 #

仅修正onsubmit的绑定逻辑，其余原有代码完全保留：

<form id="frmSetPoint" name="frmSetPoint" action="#" onsubmit="return ipFunction()" accept-charset="utf-8">
  <input type="number" onkeydown="return false" id="SETPOINT" min="1" max="10">
  <input type="submit" value="Submit Value">
</form>

注意：当前输入框设置min="1"，输入0.34会触发原生校验阻止提交，请根据实际业务调整min阈值。

JS部分 #

function ipFunction() {
  const numberInput = document.getElementById('SETPOINT');
  const form = document.getElementById('frmSetPoint');
  // 获取输入框原始值
  const originValue = numberInput.value;
  // 清除上次提交生成的旧隐藏字段，避免重复传值
  const oldHidden = document.getElementById('hidden_setpoint');
  if (oldHidden) oldHidden.remove();
  // 创建隐藏传值字段，name与原输入框一致，保证后端接参逻辑不变
  const hiddenInput = document.createElement('input');
  hiddenInput.type = 'hidden';
  hiddenInput.name = 'SETPOINT';
  hiddenInput.id = 'hidden_setpoint';
  // 拼接需要的前缀
  hiddenInput.value = '03' + originValue;
  form.appendChild(hiddenInput);
  // 临时禁用原number输入框，避免原始值被一同提交
  numberInput.disabled = true;
  // 提交完成后立刻恢复输入框可用状态，不影响后续交互
  setTimeout(() => {
    numberInput.disabled = false;
  }, 0);

  return true;
}

方案逻辑说明 #

• 全程没有修改number输入框的任何属性、值，原生数字调节按钮、范围校验功能完全保留
• 表单提交时，被禁用的number输入框值不会被携带，仅会提交隐藏字段中拼接完成的带03前缀的值，符合格式要求
• 提交后立刻恢复输入框状态，用户无感知，不影响页面后续操作

如果业务允许后端配合处理，也可以直接提交原始数值，由后端逻辑拼接03前缀生成对应ID，前端无需额外处理传值逻辑，稳定性更高。

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