使用jQuery實作輸入框僅允許輸入數字和小數點

實作jQuery輸入框限制數字和小數點輸入

在網路開發中，我們常常會遇到需求需要控制使用者在輸入方塊中輸入的內容，例如限制只能輸入數字和小數點。這種限制可以透過JavaScript和jQuery來實現。以下將介紹如何使用jQuery實作輸入框限制數字和小數點輸入的功能。

一、HTML結構

首先，我們需要在HTML中建立一個輸入框，程式碼如下：

<input type="text" id="inputNumber" placeholder="只能输入数字和小数点">

這裡建立了一個id為"inputNumber"的輸入框，並設定了placeholder屬性為"只能輸入數字和小數點"，用來提示使用者只能輸入數字和小數點。

二、jQuery實作限制輸入功能

接下來，我們使用jQuery來實作限制輸入功能。程式碼如下：

$(document).ready(function(){
  $('#inputNumber').keypress(function(event) {
    var charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
      event.preventDefault();
    } else {
      var input = $(this).val();
      if ((charCode == 46 && input.indexOf('.') !== -1) || (charCode == 46 && input === "")) {
        event.preventDefault();
      }
    }
  });
});

上面的程式碼中，先透過$(document).ready()函數來確保DOM載入完畢後再執行jQuery程式碼。然後透過keypress()函數來監聽輸入框的鍵盤按下事件。在事件處理函數中，透過event.which或event.keyCode來取得按鍵的ASCII碼，然後判斷輸入是否為數字或小數點，如果不是則封鎖預設事件。

要注意的是，要處理小數點的情況，如果輸入框已經存在小數點，再次輸入小數點或小數點輸入在輸入框開頭的情況需要進行阻止。

三、測試

最後，我們來測試程式碼。在瀏覽器中開啟包含以上代碼的HTML頁面，並嘗試在輸入框中輸入其他字符，確保只有數字和小數點可以被輸入。

透過這樣的操作，我們就可以實現使用jQuery限制輸入框只能輸入數字和小數點的功能。這樣可以有效幫助使用者輸入規範，提高使用者體驗。希望以上內容能幫助您實現對應的功能。

以上是使用jQuery實作輸入框僅允許輸入數字和小數點的詳細內容。更多資訊請關注PHP中文網其他相關文章！