如何让数字输入框点击箭头时始终显示两位小数（含末尾零）？

你在货币场景自定义了 <input type="number" step=".01" /> 输入框，要求始终显示两位小数，但遇到了问题：点击输入框箭头时，输入框会自动“简化”小数位数——比如从.09点向上箭头到.10，输入框只显示.1；虽然已经在Vue的modelValue更新里加了.toFixed(2)处理，但点击箭头时还是会短暂显示四舍五入后的数值，得点击输入框外才会显示正确的两位小数格式。

下面是几种可行的解决方法：

• 监听input事件实时强制格式化
  别只依赖modelValue的更新，直接给输入框绑定input事件，在每次输入（包括点击箭头）触发时，立即把输入值格式化为两位小数：

  <template>
    <input 
      type="number" 
      step=".01" 
      :value="formattedValue"
      @input="handleInput"
    />
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  const rawValue = ref(0.00)
  // 计算属性维护格式化后的显示值
  const formattedValue = computed(() => rawValue.value.toFixed(2))
  
  const handleInput = (e) => {
    // 把输入值转成数字，空值或非法值默认设为0
    const inputNum = parseFloat(e.target.value) || 0
    rawValue.value = inputNum
    // 直接修改输入框的显示值，避免箭头点击时的临时异常
    e.target.value = inputNum.toFixed(2)
  }
  </script>
  

  这种方式能实时捕获输入变化，强制输入框显示两位小数，解决点击箭头时的短暂异常问题。

• 改用文本输入框配合正则限制（更适合货币场景）
  原生number输入框本身受浏览器默认行为限制，在小数格式显示上不够灵活。对于货币这种对格式要求严格的场景，改用type="text"的输入框，配合正则限制输入内容，同时强制格式化显示：

  <template>
    <input 
      type="text" 
      :value="formattedValue"
      @input="handleTextInput"
    />
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  const rawValue = ref(0.00)
  const formattedValue = computed(() => rawValue.value.toFixed(2))
  
  const handleTextInput = (e) => {
    // 过滤非数字和小数点的内容
    let inputVal = e.target.value.replace(/[^0-9.]/g, '')
    // 限制最多一个小数点，且小数部分不超过两位
    const parts = inputVal.split('.')
    if (parts.length > 2) {
      inputVal = `${parts[0]}.${parts[1].slice(0,2)}`
    } else if (parts.length === 2 && parts[1].length > 2) {
      inputVal = `${parts[0]}.${parts[1].slice(0,2)}`
    }
    e.target.value = inputVal
    // 更新原始数值
    rawValue.value = parseFloat(inputVal) || 0
  }
  </script>
  

  这种方式完全规避了原生number输入框的格式问题，还能自定义输入规则，更适配货币输入的需求。

• input+blur事件双重保障（保留number输入框的方案）
  如果一定要用number输入框，可以同时绑定input和blur事件，input事件实时修正显示，blur事件再次确保格式正确：

  <template>
    <input 
      type="number" 
      step=".01" 
      v-model="rawValue"
      @input="fixDisplay"
      @blur="fixDisplay"
    />
  </template>
  
  <script setup>
  import { ref, watch } from 'vue'
  const rawValue = ref(0.00)
  
  const fixDisplay = (e) => {
    // 强制设置输入框显示两位小数
    e.target.value = rawValue.value.toFixed(2)
  }
  
  // 监听数值变化，确保原始值始终是两位小数精度的数字
  watch(rawValue, (newVal) => {
    rawValue.value = parseFloat(newVal.toFixed(2))
  })
  </script>
  

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