寻求保留3位小数的Input Mask输入格式实现方案

Got it, let's solve this input formatting issue you're dealing with. The core requirement is to shift digits from right to left, always keeping exactly 3 decimal places, while letting users input as many integer digits as they need. Here's a practical, front-end implementation using vanilla JavaScript that works perfectly for your use cases:

Step-by-Step Implementation #

First, we'll listen to the input's input event, clean up the raw input, and then split the digits into integer and decimal parts correctly.

Vanilla JavaScript Code #

// Get your input element (replace with your actual selector)
const numberInput = document.getElementById('decimal-mask-input');

numberInput.addEventListener('input', function(e) {
  // Remove all non-numeric characters to keep only digits
  const rawDigits = e.target.value.replace(/\D/g, '');
  
  // Handle empty input case
  if (!rawDigits) {
    e.target.value = '';
    return;
  }

  let integerPart, decimalPart;

  if (rawDigits.length <= 3) {
    // If input has 3 or fewer digits, integer part is 0, pad decimal with leading zeros
    integerPart = '0';
    decimalPart = rawDigits.padStart(3, '0');
  } else {
    // Split digits: everything except last 3 is integer, last 3 are decimals
    integerPart = rawDigits.slice(0, rawDigits.length - 3);
    decimalPart = rawDigits.slice(-3);
  }

  // Optional: Add thousands separators to integer part (uncomment if needed)
  // integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

  // Assemble the final formatted value
  e.target.value = `${integerPart}.${decimalPart}`;
});

How This Works #

Let's break down the logic against your test cases:

• Input "1": Raw digits are "1" → length ≤3 → integer "0", decimal padded to "001" → result 0.001
• Input "11": Raw digits "11" → decimal padded to "011" → result 0.011
• Input "11111": Raw digits "11111" (length 5) → integer part is first 2 digits "11", decimal is last 3 "111" → result 11.111
• Input "111111": Raw digits "111111" (length 6) → integer part first 3 digits "111", decimal last 3 "111" → result 111.111

Framework Adaptation (Vue Example) #

If you're using Vue, you can wrap this logic into a custom directive for reusability:

<template>
  <input v-fixed-decimal-mask placeholder="Enter digits..." />
</template>

<script>
export default {
  directives: {
    'fixed-decimal-mask': {
      mounted(el) {
        el.addEventListener('input', function(e) {
          const rawDigits = e.target.value.replace(/\D/g, '');
          if (!rawDigits) {
            e.target.value = '';
            return;
          }

          let integerPart, decimalPart;
          if (rawDigits.length <= 3) {
            integerPart = '0';
            decimalPart = rawDigits.padStart(3, '0');
          } else {
            integerPart = rawDigits.slice(0, rawDigits.length - 3);
            decimalPart = rawDigits.slice(-3);
          }

          e.target.value = `${integerPart}.${decimalPart}`;
        });
      }
    }
  }
};
</script>

Notes #

• This solution automatically filters out any non-numeric input, so users can't type dots, commas, or letters accidentally.
• If you want to add thousands separators to the integer part (e.g., 123456.111 → 123,456.111), just uncomment the optional line in the vanilla JS code.

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