如何实现仅允许输入两位小数的动态文本框？

原代码存在几个关键问题导致非法字符无法被阻止：

• onkeyup事件触发时机晚于字符输入，此时event.preventDefault()无法阻止字符插入输入框
• 函数内$(this)指向错误，应使用传入的t参数指代当前输入框
• 未限制小数点后的位数（要求仅两位小数）
• 事件对象event未正确传入函数，导致兼容性问题

修正后的实现方案 #

1. 修改动态生成的输入框事件绑定 #

将onkeyup替换为onkeydown（提前拦截按键），同时添加onpaste事件处理粘贴操作，并传递event参数：

function decimaldata() {
  var data = `<div class="closedata"><input type="text" class="fields" name="txtdecimal" autocomplete="off" onkeydown="decimalonly('txt1', this, event)" onpaste="return validatePaste(this, event)" value=""></div>
  <div class="closedata"><input type="text" class="fields" name="txtdecimal1" autocomplete="off" onkeydown="decimalonly('txt2', this, event)" onpaste="return validatePaste(this, event)" value=""></div>`;

  $("#divdynamic").append(data);
}

2. 重写decimalonly按键校验函数 #

处理数字、小数点、负号的合法输入，同时限制小数点后仅两位：

function decimalonly(n, t, event) {
  const keyCode = event.which || event.keyCode;
  const inputVal = $(t).val();
  const hasDecimal = inputVal.includes('.');
  const decimalPart = hasDecimal ? inputVal.split('.')[1] : '';

  // 允许的功能键：退格、方向键、制表符、删除键
  const allowedKeys = [8, 9, 37, 38, 39, 40, 46];
  
  // 数字键处理：小数点后超过两位则阻止
  if ((keyCode >= 48 && keyCode <= 57)) {
    if (hasDecimal && decimalPart.length >= 2) {
      event.preventDefault();
      return;
    }
    return;
  }

  // 小数点处理：仅允许一个，为空时自动补0.
  if (keyCode === 190 || keyCode === 46) {
    if (hasDecimal) {
      event.preventDefault();
    } else if (inputVal === '') {
      $(t).val('0.');
      event.preventDefault();
    }
    return;
  }

  // 负号处理：仅允许在输入开头
  if (keyCode === 45) {
    if (inputVal.startsWith('-') || inputVal !== '') {
      event.preventDefault();
    }
    return;
  }

  // 其他非允许按键直接阻止
  if (!allowedKeys.includes(keyCode)) {
    event.preventDefault();
  }
}

3. 添加粘贴校验函数 #

防止通过粘贴插入非法内容：

function validatePaste(t, event) {
  const pasteData = event.clipboardData?.getData('text') || window.clipboardData.getData('text');
  // 正则匹配：可选负号开头，整数部分至少一位，小数点后最多两位
  const regex = /^-?\d+(\.\d{1,2})?$/;
  if (!regex.test(pasteData)) {
    event.preventDefault();
    return false;
  }
  return true;
}

关键优化点说明 #

• 使用onkeydown提前拦截非法按键，确保字符不会被插入输入框
• 明确限制小数点后仅两位数字，完全符合需求示例
• 覆盖粘贴输入场景，避免绕过按键校验
• 保留必要功能键（退格、方向键等），保证正常输入体验
• 修复this指向问题，正确操作当前输入框元素

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