关于javascript：仅允许数字和减号

Allow numbers and minus sign only

我只允许在input type="text"中使用数字和减号。我只允许数字，但不允许负号。我尝试了以下正则表达式以仅允许数字：

/\D/

当我加负号时，它似乎不起作用：

/-?\D/

(为什么我有问号(？)因为不会总是有负号。)当我尝试向文本字段添加负号时，它不起作用。代码如下：

(我试图添加一个代码片段，但它无法正确编译。)

科德森

1
2
3
4
5
6
7
8
9

<input id="num" type="text" />

var input = document.getElementById('num');
input.addEventListener("keypress", function(e) {
var keycode = (e.keyCode ? e.keyCode : e.which);
if (/-?\D/.test(String.fromCharCode(keycode))) { // a non–digit was entered
e.preventDefault();
}
});

相关讨论

我建议使用此regex来匹配有效的数字：

1	/^[+-]?\d+$/

在test方法中，逻辑颠倒如下：

1
2
3
4
5
6
7

var input = document.getElementById('num');
input.addEventListener("change", function(e) {
if (!/^[+-]?\d+$/.test(this.value)) { // a non–digit was entered
console.log("non-digit was entered");
$('#num').val('');
}
});

科德森

相关讨论

我认为这个代码只允许你输入数字和减号。但由于代码还允许"ctrl+c"、"ctrl+v"、"ctrl+a"等，文本字段可以通过"ctrl+v"(粘贴)输入其他字符。

如果要同时阻止"ctrl+v"(粘贴)，请注释下面的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

$("#num").on("keydown", function(e){

//character, not with ctrl, alt key
if(e.keyCode >= 65 && e.keyCode <= 90 && !e.ctrlKey && !e.altKey) {
return false;
}

// number with shift
if(e.keyCode >= 48 && e.keyCode <= 57 && !!e.shiftKey) {
return false;
}

// ` ~ - _ = + \ | [ { ] } '" ; : / ? , < . >
var otherKeys = [186, 187, 188, 189, 190, 191, 192, 219, 220, 221, 222];
if(otherKeys.indexOf(e.keyCode) !== -1) {

// allow minus sign
if(e.keyCode === 189 && !e.shiftKey) {
return true;
}

return false;
}

// if you want to block"ctrl + v"(paste), comment the below code out
//if(e.keyCode === 86 && !!e.ctrlKey) {
// return false;
//}

return true;
});

尝试将pattern属性与RegExp[0-9-]+一起使用。

1
2
3
4
5
6
7

var input = document.querySelector("input");
input.oninput = function(e) {
if (!this.checkValidity()) {
// do stuff
console.log("invalid input")
}
}

1
2
3

input:invalid + label[for="num"]:before {
content:"invalid input";
}

1	<input id="num" type="text" pattern="[0-9-]+" minlength="1" placeholder="requires input" required /><label for="num"></label>

相关讨论

1
2
3
4
5
6

$("#id").keypress(function(e){
if (e.which != 46 && e.which != 45 && e.which != 46 &&
!(e.which >= 48 && e.which <= 57)) {
return false;
}
});

这对你有帮助

我也有同样的问题，我只想允许数字和一个前导减号，以避免出现像----89或-89-0-66这样的情况，或者出现空格或点，因为我需要一个整数。

显然，我希望允许使用箭头键和删除键，并在需要时编辑输入值。

我的jquery 5分钟工作解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

科德森

我注意到的唯一一件事是在Chrome上编辑时，光标在中间插入一个数字后到达值的末尾，在Firefox中不会发生这种情况…

在阅读了所有的建议之后，我希望你考虑一个不同的方法。

原因

您的代码现在不允许用户用键盘以任何方式修改已经插入的输入。按退格键或删除键不起作用。箭头不起作用。对于用户来说，这似乎不太舒服。

建议

考虑这个例子：

1
2
3
4
5
6
7
8

var last = '';
var input = document.getElementById('num');
input.addEventListener('input', function(e){
if (isNaN(e.target.value))
e.target.value=last;
else
last=e.target.value;
});

科德森

解释

挂接到事件输入将允许您查看输入字段的新值。如果它是一个数字(也包括浮点数和负数)，可以使用isnan方法进行检查，该方法接受字符串，如果输入不是数字，则返回true，否则返回false。因此，如果条件为真(=不是数字)，则用最后一个正确的值替换新值(在本例中，默认值设置为""，但可能类似于var last = isNaN(e.target.value)?'':e.target.value;(用于支持默认值或其他任何值)。否则(输入实际上是一个数字)，您将保留该值，并将其记录为最后一次成功。

好处显而易见，用户可以使用箭头、退格键、删除键或组合键ctrl+c、ctrl+v，同时保留功能(错误的输入(nan)会立即删除)。

注释

如果您想要严格的有符号整数，使用这种方法，如果您在else子句中检测到它，那么您总是可以切断浮点。另外，不仅是考虑。(点，但不是逗号)作为数字的有效部分，它还允许1E3这样的符号。查看此日志了解更多详细信息。

您正在测试String.fromCharCode(keycode)的结果。

这不能是两个字符。

1	if (! /-\|\d/.test(String.fromCharCode(keycode))) { // a non–digit was entered

regex /-|\d/检查是否只有一个字符是-或数字。

为了在代码示例中使用，匹配的结果将与!否定。

当您测试每一个按键时，这仍然允许输入包含-值的中间部分，如123-456-789。

\D表示非数字

你可能在想\D

/^-?\d+$/

相关讨论