JavaScript是一種廣泛用于創建動態內容的腳本語言。它可以用來創建交互式用戶界面、驗證表單內容、執行動畫效果等。在很多應用場景中，只允許輸入數字和逗號，今天我們就來聊聊如何使用JavaScript來實現這個功能。

首先，我們需要使用正則表達式來限制輸入的內容。正則表達式由多個字符組合而成，用于匹配字符串中的字符。在JavaScript中，正則表達式以斜杠字符來定義，例如：/^[0-9,]+$/。

function onlyNumbersAndCommas(event) {
var regex = /^[0-9,]+$/;
var key = String.fromCharCode(event.keyCode ? event.keyCode : event.which);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
}

上面的代碼展示了如何使用正則表達式來限制輸入。我們先創建一個正則表達式，其中^表示匹配字符串的開始，$表示匹配字符串的結尾，[0-9,]+表示匹配數字和逗號，加號表示匹配一個或多個數字和逗號。

在輸入框的鍵盤按下事件中，我們獲取按下的字符并使用test()方法驗證其是否符合正則表達式的要求。如果不符合，我們就阻止默認行為并返回false，否則允許輸入。

接下來，我們需要將該函數附加到輸入框的鍵盤按下事件。

var input = document.getElementById("input");
input.addEventListener("keypress", onlyNumbersAndCommas, false);

上面的代碼展示了如何將函數附加到輸入框的鍵盤按下事件。我們先獲取輸入框的DOM元素，然后使用addEventListener()方法將函數附加到鍵盤按下事件中。

最后，我們需要注意到有些用戶可能會嘗試使用鼠標粘貼或拖放文本來繞過我們的限制。為了防止這種情況的發生，我們還需要在輸入框的粘貼和放置事件中添加類似的驗證步驟。

input.addEventListener("paste", function(event) {
var regex = /^[0-9,]+$/;
var clipboardData = event.clipboardData || window.clipboardData;
var pastedData = clipboardData.getData("Text");
if (!regex.test(pastedData)) {
event.preventDefault();
return false;
}
}, false);
input.addEventListener("drop", function(event) {
var regex = /^[0-9,]+$/;
var draggedData = event.dataTransfer.getData("Text");
if (!regex.test(draggedData)) {
event.preventDefault();
return false;
}
}, false);

上面的代碼展示了如何在粘貼和放置事件中添加類似的驗證步驟。我們先獲取剪貼板或拖放的數據，然后使用test()方法驗證其是否符合正則表達式的要求。如果不符合，我們就阻止默認行為并返回false，否則允許粘貼或拖放。

總之，使用JavaScript只允許輸入數字和逗號是一種常見的表單驗證技術。我們可以使用正則表達式來限制輸入的內容，并將驗證函數附加到輸入框的鍵盤按下、粘貼和放置事件中。這樣可以確保輸入框只能接受符合要求的內容，減少不必要的錯誤和潛在的安全風險。