javascript 只能输入数字 逗号

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只允许输入数字和逗号是一种常见的表单验证技术。我们可以使用正则表达式来限制输入的内容，并将验证函数附加到输入框的键盘按下、粘贴和放置事件中。这样可以确保输入框只能接受符合要求的内容，减少不必要的错误和潜在的安全风险。

查看更多关于javascript 只能输入数字 逗号的详细内容...