Vue限制輸入框只能輸入數字

一、Vue限制輸入框只能輸入數字和小數

在Vue中，我們可以通過正則表達式限制輸入框只能輸入數字和小數。具體實現方法如下：

// template
<template>
  <input type="text" v-model="inputNumber" :pattern="numberPattern">
</template>

// script
<script>
export default {
  data() {
    return {
      inputNumber: '',
      numberPattern: '^\\d+(\\.\\d{0,2})?$' // 正則表達式，限制小數點後最多兩位
    }
  }
}
</script>

在上面的代碼中，我們通過v-model綁定輸入框的內容到data中的inputNumber變數中，通過:pattern屬性綁定正則表達式到輸入框中，限制輸入框只能輸入數字和小數點，並且小數點後最多只能有兩位數字。

二、Vue限制輸入框只能輸入數字手機號

在實際開發中，我們經常需要限制輸入框只能輸入數字手機號。下面是實現方法：

// template
<template>
  <input type="text" v-model="phoneNumber" :maxlength="11" :pattern="phoneNumberPattern">
</template>

// script
<script>
export default {
  data() {
    return {
      phoneNumber: '',
      phoneNumberPattern: '^1[3|4|5|7|8][0-9]{9}$' // 正則表達式，限制只能輸入11位數字手機號
    }
  }
}
</script>

上述代碼中，我們通過:maxlength屬性限制輸入框只能輸入11位手機號，通過:pattern屬性綁定正則表達式，保證輸入框中只能輸入如”13012345679″格式的手機號碼。

三、限制輸入框只能輸入數字

限制輸入框只能輸入數字是比較常見的需求，下面是Vue實現方法：

// template
<template>
  <input type="text" v-model="inputNumber" :pattern="numberPattern">
</template>

// script
<script>
export default {
  data() {
    return {
      inputNumber: '',
      numberPattern: '[0-9]*' // 正則表達式，限制只能輸入數字
    }
  }
}
</script>

在上述代碼中，我們通過:pattern屬性綁定正則表達式，保證輸入框中只能輸入數字。

四、Vue輸入框只能輸入正整數

有時候，我們需要限制輸入框只能輸入正整數。在Vue中，可以這樣實現：

// template
<template>
  <input type="text" v-model="integerNumber" :pattern="integerNumberPattern">
</template>

// script
<script>
export default {
  data() {
    return {
      integerNumber: '',
      integerNumberPattern: '[1-9]\\d*' // 正則表達式，限制只能輸入正整數
    }
  }
}
</script>

在上述代碼中，我們通過:pattern屬性綁定正則表達式，保證輸入框中只能輸入正整數。

五、Vue輸入框限制數字長度

有時候，我們需要限制輸入框中數字的位數。可以這樣實現：

// template
<template>
  <input type="text" v-model="inputNumber" :maxlength="maxNumberLength">
</template>

// script
<script>
export default {
  data() {
    return {
      inputNumber: '',
      maxNumberLength: 6 // 限制數字位數為6位
    }
  }
}
</script>

在上述代碼中，我們通過:maxlength屬性限制數字最多只能輸入六位。

六、Vue輸入框輸入事件

在實際開發中，我們可能需要在用戶輸入時判斷輸入是否符合要求。Vue提供了@input事件來實現這個需求：

// template
<template>
  <input type="text" v-model="inputNumber" @input="onInputNumber">
</template>

// script
<script>
export default {
  data() {
    return {
      inputNumber: ''
    }
  },
  methods: {
    onInputNumber() {
      if (isNaN(this.inputNumber)) // 判斷是否輸入的為數字
        this.inputNumber = '';
    }
  }
}
</script>

上面的代碼中，@input事件綁定了onInputNumber方法，當用戶輸入時，如果輸入的不是數字，則將輸入框清空。

七、Vue輸入框無法輸入內容

有時候，我們需要在某些情況下禁止用戶輸入內容，可以通過Vue的disabled屬性來實現：

// template
<template>
  <input type="text" v-model="inputNumber" :disabled="disableInput">
</template>

// script
<script>
export default {
  data() {
    return {
      inputNumber: '',
      disableInput: true // 禁止用戶輸入
    }
  }
}
</script>

在上述代碼中，我們將disabled屬性設為true，從而禁止用戶輸入內容。

八、Vue 輸入框限制兩位小數

有時候，我們需要限制輸入框中小數點後最多只能有兩位，可以這樣實現：

// template
<template>
  <input type="text" v-model="inputNumber" @input="onInputNumber">
</template>

// script
<script>
export default {
  data() {
    return {
      inputNumber: ''
    }
  },
  methods: {
    onInputNumber(event) {
      let value = event.target.value;
      value = value.replace(/[^\d.]/g, '');  // 清除"數字"和"."以外的字元
      value = value.replace(/^\./g, '');     // 驗證第一個字元是數字而不是
      value = value.replace(/\.{2,}/g, '.'); // 只保留第一個小數點，清除多餘的
      value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.'); // 限制只能輸入兩位小數
      event.target.value = value;
      this.inputNumber = value;
    }
  }
}
</script>

在上面的代碼中，我們通過@input事件捕捉用戶輸入，然後用正則表達式去除不符合要求的字元，最後限制小數點後只能有兩位。

九、Vue輸入框禁止輸入選取

在實際開發中，我們可能需要限制用戶只能通過輸入來改變輸入框中的內容，不能通過選取來改變內容。Vue提供了onSelect事件實現這個需求：

// template
<template>
  <input type="text" v-model="inputNumber" @select="onSelect">
</template>

// script
<script>
export default {
  data() {
    return {
      inputNumber: ''
    }
  },
  methods: {
    onSelect() {
      window.getSelection().removeAllRanges(); // 防止用戶通過選取來改變輸入框內容
    }
  }
}
</script>

在上述代碼中，我們通過@select事件捕捉用戶的選取動作，並調用window.getSelection().removeAllRanges()方法來禁止用戶通過選取來改變輸入框內容。