如何限制input輸入數字和小數

一、使用HTML5標準的input類型

HTML5標準提供了多種input類型，其中包括number和email等特殊類型，可以限制input輸入數字和小數。通過設置input的type屬性，就可以實現輸入數字和小數的限制。

<label>請輸入數字:</label>
<input type="number" step="0.01" name="num"> //step屬性可以設置小數位數

通過以上代碼，設置input的type為number，就可以在輸入框中只允許輸入數字和小數點，同時通過設置step屬性，還可以實現小數位數的限制。

二、使用正則表達式進行限制

除了使用HTML5標準的input類型進行限制，還可以使用正則表達式來限制input只能輸入數字和小數。

<label>請輸入數字:</label>
<input type="text" name="num" onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')"> //onkeyup事件可以動態限制輸入

通過以上代碼，設置input的type為text，並通過onkeyup事件實現了實時限制輸入。在onkeyup事件中，通過正則表達式，篩選出非數字和小數點的字符，將其替換為空字符，從而實現了限制輸入的效果。

三、使用jQuery插件進行限制

除了使用HTML5標準和正則表達式進行限制，還可以使用jQuery插件進行限制。jQuery插件中有多款可以限制input輸入數字和小數的插件，其中比較常用的是jQuery Mask Plugin和jQuery Number Plugin。

<label>請輸入數字:</label>
<input type="text" name="num" class="input-number">
<script>
  $('.input-number').mask('000.00', {reverse:true}); //使用jQuery Mask Plugin插件實現輸入數字和小數的限制
</script>

通過以上代碼，設置input的type為text，並添加了class為input-number。通過運用jQuery Mask Plugin插件，設置了輸入格式為，整數部分和小數部分各佔三位，並且小數部分在前面，整數部分在後面，這樣就可以實現輸入數字和小數的限制。同樣，也可以使用jQuery Number Plugin插件來實現相似的效果。

四、使用Vue.js框架進行限制

除了使用傳統的HTML和jQuery限制輸入外，還可以使用Vue.js框架，通過數據綁定和計算屬性，實現輸入的限制。

<label>請輸入數字:</label>
<input type="text" name="num" v-model="inputNum">
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      inputNum: '',
    },
    computed: {
      formattedNum: function() {
        return parseFloat(this.inputNum).toFixed(2); //使用toFixed()方法，保留小數點後兩位
      }
    }
  });
</script>

通過以上代碼，使用Vue.js框架，將input的value值與data中的inputNum綁定。而通過計算屬性computed，將inputNum經過parseFloat()方法轉換成數字類型之後，使用toFixed()方法，保留小數點後兩位，並將結果返回。這樣就可以實現輸入數字和小數的限制，並限制小數位數。