kinanson的技術回憶

HTML雖然已經提供了number的控制項，但是預設是能輸入e和+跟-的，而我們有有些畫面是只能輸入純數字的，那就來看一下用vue如何簡單實現這個功能吧

不符合預期值的話，就不允許輸入，這個需要定義在keypress的事件裡面

keypress (e) {     
  if (e.key === '+' || e.key === 'e' || e.key === '-') {
    e.preventDefault()
  }
}

為求方便所以我一樣為了調用方使用v-model來做

props: {
  value: Number,    
}

所以當我們的值有改變的時候，就去emit通知父元件值已更新，但這邊我只定義change事件，所以預設是類似lazy的效果，不會馬上key完馬上反應。

change (e) {
  this.$emit('input', +e.target.value)
}

如果當我們focus的時候，想要預設選中控制項裡的值，可以在focus裡定義

focus () {
  this.$el.select()
}

這樣子就完成了禁止輸入數字以外的值，並且只要進入在控制項裡面，就會選中值了，完整程式碼

<template>
  <input @keypress="keypress" @change="change" type="number" :value="value" @focus="focus">
</template>

<script>
export default {
  props: {
    value: Number
  },
  methods: {
    keypress (e) {
      if (e.key === '+' || e.key === 'e' || e.key === '-') {
        e.preventDefault()
      }
    },
    change (e) {
      this.$emit('input', +e.target.value)
    },
    focus () {
      this.$el.select()
    }
  }
}
</script>

<style>

</style>