求可限制HTML表单小数位数的onkeydown函数实现方案

Got it, let's tackle this problem of restricting input to a specified number of decimal places right as the user types. Here's a practical, robust implementation that prevents extra decimal digits from being entered:

HTML #

<input type="text" id="decimalInput" data-decimals="1" onkeydown="restrictDecimalPlaces(event)">

JavaScript #

function restrictDecimalPlaces(e) {
  const input = e.target;
  const maxDecimals = parseInt(input.dataset.decimals, 10);
  
  // Let control keys (backspace, delete, arrows, tab) work normally
  const allowedControlKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'];
  if (allowedControlKeys.includes(e.key)) {
    return;
  }

  // Split current value into integer and decimal parts
  const [integerPart, decimalPart] = input.value.split('.');
  
  // Handle decimal point input
  if (e.key === '.') {
    // Block multiple decimal points
    if (decimalPart !== undefined) {
      e.preventDefault();
      return;
    }
    return; // Allow a single decimal point if none exists
  }

  // Handle digit input
  if (!isNaN(parseInt(e.key, 10))) {
    // No decimal point yet? Let any digit through
    if (decimalPart === undefined) {
      return;
    }
    // Stop input if we've hit the max decimal length
    if (decimalPart.length >= maxDecimals) {
      e.preventDefault();
    }
  } else {
    // Block any other non-control, non-digit, non-decimal keys
    e.preventDefault();
  }
}

How This Works #

• Control Key Exceptions: We make sure users can still edit their input normally by letting backspace, delete, arrow keys, and tab function as expected.
• Decimal Point Guard: Only one decimal point is allowed—no more accidentally typing 0..1 or 0.1.2.
• Digit Limit Check: Once a decimal point is present, we count the existing decimal digits and block any new ones if we've reached the limit set in data-decimals.
• Flexible Setup: The data-decimals attribute lets you set different limits for different inputs without rewriting the core function.

Extra Tips for Edge Cases #

• Handle Paste Events: Users might paste a number with too many decimals. Add this handler to clean up pasted content:

  function handlePaste(e) {
    const input = e.target;
    const maxDecimals = parseInt(input.dataset.decimals, 10);
    setTimeout(() => {
      const [integerPart, decimalPart] = input.value.split('.');
      if (decimalPart && decimalPart.length > maxDecimals) {
        input.value = `${integerPart}.${decimalPart.slice(0, maxDecimals)}`;
      }
    }, 0);
  }
  

  Just add onpaste="handlePaste(event)" to your input element.
• Avoid type="number": Browsers have default behavior for number inputs that can interfere with custom restrictions—type="text" is more reliable here.

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