React实现仅允许输入正非零整数的数字输入框

Got it, let's fix this common frustration with the default number input. The min="1" and step="1" attributes work great for the spinner arrows, but they're completely useless when someone types directly with the keyboard. We need to layer on some JavaScript to block invalid keystrokes and clean up any sneaky invalid inputs that slip through (like pasted text).

Step 1: The Base HTML #

First, start with the standard number input—we'll keep min and step because they still help with the spinner and form validation:

<input 
  type="number" 
  id="positiveIntInput" 
  min="1" 
  step="1" 
  value="1"
  placeholder="Enter a positive integer"
>

Step 2: Block Invalid Keystrokes #

Add a keydown event listener to stop users from typing characters that don't belong (like -, ., or e which the number input allows for exponents). We'll still let functional keys through so users can edit normally:

const input = document.getElementById('positiveIntInput');

input.addEventListener('keydown', (e) => {
  // Allow essential editing keys
  const allowedFunctionalKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter'];
  if (allowedFunctionalKeys.includes(e.key)) return;

  // Allow digits 0-9 (we'll handle leading zeros later)
  if (/^\d$/.test(e.key)) return;

  // Block everything else (hyphens, decimals, exponents, etc.)
  e.preventDefault();
});

Step 3: Clean Up Inputs (Pastes, Drag-and-Drop, etc.) #

The keydown handler won't catch paste operations or drag-and-drop text. Add an input listener to sanitize the value and enforce our rules:

input.addEventListener('input', () => {
  let cleanedValue = input.value.trim();
  
  // Remove all non-digit characters
  cleanedValue = cleanedValue.replace(/\D/g, '');
  
  // Handle empty input or zero: reset to 1 (adjust this if you prefer empty instead)
  if (!cleanedValue || cleanedValue === '0') {
    input.value = '1';
  } else {
    // Strip leading zeros (so "00123" becomes "123")
    input.value = cleanedValue.replace(/^0+/, '') || '1';
  }
});

Step 4: Final Validation on Blur #

Add a blur listener to make sure the value is valid when the user clicks away—this catches any edge cases we might have missed:

input.addEventListener('blur', () => {
  const parsedValue = parseInt(input.value, 10);
  if (isNaN(parsedValue) || parsedValue < 1) {
    input.value = '1';
  }
});

Why This Works #

• The keydown handler stops invalid characters from being typed in the first place.
• The input handler cleans up pasted content and fixes leading zeros/zero values.
• The blur handler provides a final safety net to ensure the input is always a valid positive integer.

You can adjust the default value (currently 1) to whatever makes sense for your use case—just make sure it's a positive integer.

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