Question

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

/\D/

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

/-?\D/

（我有问号（？）的原因是因为不会总是有减号。）当我尝试在文本字段中添加减号时，它不起作用。这是代码：

（我尝试添加代码段，但无法正确编译。）

CodePen

<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();
    }
});

Answer 1

我建议使用此正则表达式匹配有效数字：

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

并在test方法中将逻辑反转为：

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('');
    }
});

CodePen

Answer 2

尝试将pattern属性与RegExp [0-9-]+

一起使用

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我认为此代码只允许您输入数字和减号。但是因为代码还允许＆＃34; ctrl + c＆＃34;，＆＃34; ctrl + v＆＃34;，＆＃34; ctrl + a＆＃34;等等，文本字段可以通过＆＃34; ctrl + v＆＃34;（粘贴）输入其他字符。

如果你想阻止＆＃34; ctrl + v＆＃34;（粘贴），请注释掉下面的代码。

＆＃13;

$("#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;
});

＆＃13;

Answer 4

\D指非数字

您可能正在考虑\d

/^-?\d+$/

Answer 5

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

这永远不会是两个字符。

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

正则表达式/-|\d/只检查一个字符是-还是数字。

要在代码示例中使用，请使用!否定匹配结果。

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

Answer 6

在阅读完所有建议后，我希望您考虑采用不同的方法。

原因

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

建议

考虑这个例子：

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;
});

CodePen

说明

挂钩事件输入将允许您查看输入字段的新值。你可以使用方法 isNaN 来检查它是否是一个数字（这也包括浮点数和负数），它接受字符串，如果输入不是数字则返回true，否则返回false。因此，如果条件为真（=非数字），则将新值替换为最后一个正确的值（在这种情况下，默认设置为＆＃39;＆＃39;，但可能类似于{{1 （用于支持默认值或其他）。否则（输入确实是一个数字），您保留该值，并将其记录为上次成功。

好处很明显，允许用户使用箭头，退格键，删除或组合ctrl + c，ctrl + v等键，同时保留功能（错误输入（NaN）会立即删除）。

注意

如果你想要严格签名的整数，使用这种方法，如果你在else子句中检测到它，你总是可以切断浮点数。此外，不仅是NaN考虑。（点，但不是逗号）是数字的有效部分，它还允许使用1e3之类的符号。请查看此post以获取更多详细信息。

Answer 7

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

显然，我想允许箭头键和删除键，以便在需要时编辑输入值

我使用jQuery的5分钟工作解决方案：

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

var input = $('input');
var allowed = [
 37, //left arrow
 39, //right arrow
 8 //delete
];

input.on('keyup', function(e) {

 if (allowed.indexOf(e.keyCode) !== -1) {
   return;
 }

 //remove white spaces and dots as I want integers
 var value = $(this).val().trim().replace(/\./g, '');

 if (isNaN(value)) {

   //check negative number validation
   if (value.substring(0, 1) === '-') {
     value = value.replace(/\D/g, '');
     value = '-' + value;
   } else {
     value = value.replace(/\D/g, '');
   }
 }
 $(this).val(value)
});

Codepen

我唯一注意到的是在Chrome上进行编辑时，光标在中途插入数字后到达值的末尾，在Firefox中不会发生......

Answer 8

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

这可能会对你有所帮助

Answer 9

通过下面的代码可以实现。给定的代码只能在第一位允许减号（-）。

<pre><code>
 window.onload=function() {
    var input = document.getElementById("TextBoxId");

    input.onkeypress = function(e) {    e = e || window.event;
        var charCode = (typeof e.which == "number") ? e.which : e.keyCode;

        // Allow non-printable keys
        if (!charCode || charCode == 8 /* Backspace */ ) {
            return;
        }

        var typedChar = String.fromCharCode(charCode);

        // Allow numeric characters
        if (/\d/.test(typedChar)) {
            return;
        }

        // Allow the minus sign (-) if the user enters it first
        if (typedChar == "-" && this.value == "") {
            return;
        }

        // In all other cases, suppress the event
        return false;
    };
    }



</code></pre>

仅允许数字和减号

CodePen

9 个答案:

原因

建议

说明

注意