使用 <input type=number> 会导致在事件侦听器中，如果输入不是有效数字，则 this.value 返回空字符串。您可以在 http://jsfiddle.net/fSy53/ 查看示例。
但是，无效的字符仍然显示在输入框中。
有没有办法从事件侦听器内获取实际显示的值，包括无效字符？
我的最终目标是防止用户在字段中键入任何非数字字符。我需要使用 type=number，以便移动设备使用数字虚拟键盘。我的目标是在keyup keypress 上执行像 this.value = this.value.replace(/[^0-9.]/g, "") 这样的操作，但是这不起作用，因为如果键入无效字符，则从 this.value 读取将返回 ""。
如果您不喜欢接收到的键值，请尝试阻止默认行为:
document.querySelector("input").addEventListener("keypress", function (evt) {
if (evt.which < 48 || evt.which > 57)
{
evt.preventDefault();
}
});
$这样的Shift键，.which与非Shift键相同，并且在虚拟键盘上，e.shiftKey的值不会被设置为真值。相关链接：https://dev59.com/gXnZa4cB1Zd3GeqPlxvp - Explosion Pills您可以通过阻止非数字值的keyPress事件来实现此操作。
例如（使用jQuery）
$('.input-selector').on('keypress', function(e){
return e.metaKey || // cmd/ctrl
e.which <= 0 || // arrow keys
e.which == 8 || // delete key
/[0-9]/.test(String.fromCharCode(e.which)); // numbers
})
这包括所有不同类型的输入（例如来自数字键盘的输入与来自键盘的输入具有不同的代码），以及退格键、方向键、控制/cmd + r重新加载等。
document.querySelector("input").addEventListener("keypress", function (e) {
var allowedChars = '0123456789.';
function contains(stringValue, charValue) {
return stringValue.indexOf(charValue) > -1;
}
var invalidKey = e.key.length === 1 && !contains(allowedChars, e.key)
|| e.key === '.' && contains(e.target.value, '.');
invalidKey && e.preventDefault();});
通过检查字符串长度e.key.length === 1，此函数不会干扰Firefox（例如Backspace、Tab等）中的控制代码。
它还可以防止在数字之间和开头出现重复的圆点：e.key === '.' && contains(e.target.value, '.')。
不幸的是，它不能防止末尾的多个点：234....。
看起来没有办法解决这个问题。
Ctrl+R(重新加载当前页面)，Ctrl+A等操作。我认为可以安全地添加一个!e.ctrlKey检查。 - mfulton26其他答案看起来比必要的复杂，所以我将他们的答案调整为这个简短而甜美的函数。
function allowOnlyNumbers(event) {
if (event.key.length === 1 && /\D/.test(event.key)) {
event.preventDefault();
}
}
这不会改变任何箭头、回车、Shift、Ctrl或Tab键的行为，因为这些事件的键属性长度超过一个字符。它还使用简单的正则表达式来查找任何非数字字符。
10.01？而且这也不会阻止 1.1.1 的提交。 - GeorgeWLif条件中添加!e.shiftKey && !e.ctrlKey && !e.metaKey &&。 - tony19document.querySelector("input").addEventListener("keypress", function (e) {
if (
e.key.length === 1 && e.key !== '.' && isNaN(e.key) && !e.ctrlKey ||
e.key === '.' && e.target.value.toString().indexOf('.') > -1
) {
e.preventDefault();
}
});
inputs[5].addEventListener('keydown', enterNumbers);
function enterNumbers(event) {
if ((event.code == 'ArrowLeft') || (event.code == 'ArrowRight') ||
(event.code == 'ArrowUp') || (event.code == 'ArrowDown') ||
(event.code == 'Delete') || (event.code == 'Backspace')) {
return;
} else if (event.key.search(/\d/) == -1) {
event.preventDefault();
}
}
ee 不是一个数字 -> isNaN(e.key)e.preventDefault()einput.addEventListener("keypress", function (e) {
if (isNaN(e.key)) e.preventDefault();
});
我也会添加MetaKey，因为我正在使用MacOS
input.addEventListener("keypress", (e) => {
const key = e.key;
if (!(e.metaKey || e.ctrlKey) && key.length === 1 && !/\d\./.test(key)) {
e.preventDefault();
}
}
!isNaN(parseFloat(key))
接受答案的更新:
由于许多属性变得过时
(属性) KeyboardEvent.which: 数字 @过时
你应该只依赖key属性，并自己创建其余逻辑：
该代码允许Enter、Backspace和所有数字[0-9]，其他任何字符都被禁止。
document.querySelector("input").addEventListener("keypress", ({ key, preventDefault }) => {
if (isNaN(parseInt(key, 10)) && !['Backspace', 'Enter'].includes(key)) {
preventDefault();
}
});
注意 这将禁用粘贴操作
这是我的简单解决方案，您只需将输入类型保持为文本，这样当您使用event.target.value时，您将获得完整的字符串，而不仅仅是数字或空字符串，因此您实际上可以检查是否已经有一个点或者没有。我没有使用已弃用的属性event.which
isNumber(event) {
var allowed = "";
if (event.target.value.includes(".")) {
allowed = "123456789";
} else {
allowed = "123456789.";
}
if (!allowed.includes(event.key)) {
event.preventDefault();
}
}
document.getElementById('number').addEventListener('keypress', isNumber);
the HTML
function isNumber(event) {
var allowed = "";
if (event.target.value.includes(".")) {
allowed = "0123456789";
} else {
allowed = "0123456789.";
}
if (!allowed.includes(event.key)) {
event.preventDefault();
}
}
document.getElementById('number').addEventListener('keypress',isNumber);<h3>You can input only numbers and one point (this would be a float or int) </h3>
<input type="text" id="number" />
inputmode，可以设置为numeric以显示数字键盘。不幸的是，根据mozilla，目前没有浏览器支持它。 - sometype='number'，Chrome将防止非数字字符出现在输入框中。 - Sean the Beaninputmode属性的更新：目前默认情况下没有任何浏览器支持它（请参见 http://caniuse.com/#search=inputmode），但可以通过设置 Firefox 的dom.forms.inputmode标志来启用它。 - Sean the Bean