只允许数字和减号答案

【问题标题】：Allow numbers and minus sign only只允许数字和减号
【发布时间】：2019-12-02 18:30:15
【问题描述】：

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

/\D/

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

/-?\D/

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

（我尝试添加代码 sn-p，但编译不正确。）

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

【问题讨论】：

\D 表示任何但数字。用它来允许only个数字是没有意义的。
你想要这个：/-?\d+/
我笑得很厉害，@Jessica。似乎没有人明白你的真正意思是 \D，因为你的代码 disallows 一切都是 not a number 从字面上看，没有人关心阅读下面的行，也没有人关心你的 //comment .
使用字符类：/[0-9\-]/ 只允许数字和数字，/[^0-9\-]/ 用于逆
@KiraCrafter - 字符可能不需要在类中转义

标签： javascript regex

【解决方案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

【讨论】：

我试过了，但还是不能插入减号。
我认为您需要在addEventListener 中使用blur 而不是keypress
这将如何帮助我插入减号？
代码还是不好，你可以像-------78一样多次输入减号
不，^[+-]?\d+$ 不允许在开始时使用多个减号。

【解决方案2】：

尝试使用pattern 属性和RegExp [0-9-]+

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

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

&lt;input id="num" type="text" pattern="[0-9-]+" minlength="1" placeholder="requires input" required /&gt;&lt;label for="num"&gt;&lt;/label&gt;

【讨论】：

尝试自己的演示并输入：123
@dev-null 查看更新后的帖子，在\d 之后添加+
现在试试你自己的演示并输入：-123 :-)
@dev-null 查看更新后的帖子。将RegExp 更新为-|\d|-\d+|\d+|\d+-
顺便说一句，您只需要：-?\d* 或 -?\d+ 取决于天气与否 - 是允许的输入。

【解决方案3】：

我认为这段代码只允许你输入数字和减号。但是因为代码还允许“ctrl + c”、“ctrl + v”、“ctrl + a”等..，文本字段可以通过“ctrl + v”（粘贴）输入其他字符。

如果您还想阻止“ctrl + v”（粘贴），请注释掉下面的代码。

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

【讨论】：

【解决方案4】：

\D指的是非数字

你可能在想\d

/^-?\d+$/

【讨论】：

我试过了，但还是不能插入减号。

【解决方案5】：

您正在针对String.fromCharCode(keycode) 的结果进行测试。

这不能是两个字符。

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

正则表达式 /-|\d/ 检查是否有一个字符是 - 或数字。

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

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

【讨论】：

【解决方案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

说明

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

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

注意

如果你想要严格有符号的整数，使用这种方法，如果你在 else 子句中检测到浮点数，你总是可以切断它。另外，不仅 isNaN 考虑 . （点，但不是逗号）作为数字的有效部分，它也允许像 1e3 这样的符号。查看post了解更多详情。

【讨论】：

【解决方案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 中不会发生...

【讨论】：

【解决方案8】：

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

这可能对你有帮助

【讨论】：

【解决方案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>

【讨论】：