HTML文本输入框去除数字前导零的JavaScript实现求助

Hey Joseph, let's fix this leading zero issue for your text input! Here's a practical, step-by-step solution that handles both integers and decimals correctly—no weird edge cases like turning 0.123 into .123.

Step 1: Basic HTML Setup #

First, set up your input element with an ID so we can easily target it with JavaScript:

<input type="text" id="numericInput" placeholder="Enter positive number...">

Step 2: Core JavaScript Logic #

We'll listen for the input event (triggers whenever the user types or pastes content) and clean up the input value in real-time. This logic covers all the cases you mentioned and avoids common pitfalls:

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

input.addEventListener('input', function() {
  let value = this.value.trim();
  
  // Skip processing if the input is empty
  if (!value) return;
  
  // Remove leading zeros that are followed by non-zero digits (e.g., 045 → 45, 000.85 → 0.85)
  value = value.replace(/^0+(?=\d)/, '');
  
  // If the cleaned value starts with a decimal point, add a leading zero (e.g., .123 → 0.123)
  if (value.startsWith('.')) {
    value = '0' + value;
  }
  
  // If all input zeros were stripped (e.g., user entered "0000"), set value to "0"
  if (!value) {
    value = '0';
  }
  
  // Update the input with the cleaned value
  this.value = value;
});

How It Handles Edge Cases #

Let's verify the scenarios you care about:

• 045 → converts to 45
• 0450.85 → converts to 450.85
• 000.123 → stays 0.123 (we keep the single zero before the decimal)
• 0000 → becomes 0
• 0.00 → remains 0.00 (trailing decimal zeros are preserved since you didn't mention removing them)

Bonus: Fix Cursor Position (Optional) #

By default, updating the input value makes the cursor jump to the end, which is annoying if the user is editing in the middle of the number. Here's the enhanced version to keep the cursor in place:

input.addEventListener('input', function() {
  const cursorPos = this.selectionStart;
  const originalValue = this.value;
  let value = originalValue.trim();
  
  // Same cleaning logic as before
  if (!value) return;
  value = value.replace(/^0+(?=\d)/, '');
  if (value.startsWith('.')) value = '0' + value;
  if (!value) value = '0';
  
  // Only update if the value changed, then adjust cursor position
  if (value !== originalValue) {
    this.value = value;
    const zerosRemoved = originalValue.length - value.length;
    this.setSelectionRange(cursorPos - zerosRemoved, cursorPos - zerosRemoved);
  }
});

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