如何用jQuery限制数字输入框仅允许非十进制正整数输入

Hey there! Let's get that input validation sorted out for you. Your current code only checks if the value is numeric, but it doesn't handle edge cases like leading zeros, zero itself, decimals, or non-numeric characters like "a" and hyphens. Let's build a robust solution that blocks all those invalid inputs in real-time.

The Problem with Your Current Code #

Your existing jQuery logic only removes non-numeric characters by slicing the value, but it doesn't:

• Block invalid keystrokes before they're entered
• Prevent leading zeros (like "01", "02")
• Reject zero entirely
• Handle pasted invalid content

The Solution: Enhanced jQuery Validation #

This code will handle keystrokes, keyup, and paste events to enforce your rules: only positive integers greater than 0, no leading zeros, no decimals, no letters, no hyphens.

$(document).on('keypress keyup paste', '.numeric-only', function(e) {
    // First: Block invalid keystrokes before they're typed
    const allowedControlKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'];
    const pressedKey = e.key;

    // Allow control keys for navigation/editing
    if (!allowedControlKeys.includes(pressedKey)) {
        // Only allow 0-9 digits; block everything else (hyphens, decimals, letters)
        if (!/^\d$/.test(pressedKey)) {
            e.preventDefault();
            return;
        }
    }

    // Second: Clean up the value after input/paste
    let inputValue = $(this).val().trim();
    // Remove any non-digit characters first
    inputValue = inputValue.replace(/[^\d]/g, '');
    
    // Enforce rules: no zero, no leading zeros for numbers longer than 1 digit
    if (inputValue === '0' || (inputValue.startsWith('0') && inputValue.length > 1)) {
        // Remove leading zeros, or clear if result is empty/zero
        const cleanedValue = inputValue.replace(/^0+(?=\d)/, '');
        $(this).val(cleanedValue || '');
    }
});

How This Works #

1. Keystroke Blocking: We immediately prevent non-digit keys (like hyphens, decimals, "a") from being entered, while letting control keys (backspace, arrows, tab) through for normal editing.
2. Post-Input Cleaning: After any input (typing or pasting), we:
   • Strip out any non-numeric characters that might slip through (like pasted letters)
   • Remove leading zeros from numbers longer than one digit (turns "02" into "2")
   • Clear the input if the value is just "0"

Pair with Your HTML #

Keep your existing HTML attributes (they add an extra layer of browser-level validation), but the jQuery will handle the edge cases the browser misses:

<div class=""> 
  <input type="number" class="form-control quan numeric-only" min="1" step="1" minlength="1" value="'.$qty.'"/> 
</div>

Bonus Tip #

If you want to automatically set a valid value (like "1") instead of clearing invalid inputs, you can adjust the final line to:

$(this).val(cleanedValue || '1');

This way, users get a valid starting point if they try to enter something invalid.

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