Question

当我输入输入类型编号时，字母e和特殊字符也会显示在输入字段中。我想只显示数字。如何阻止它们？

<input type="number">

Answer 1

如果您不喜欢传入的键值，请尝试阻止默认行为：

document.querySelector(".your_class").addEventListener("keypress", function (evt) {
    if (evt.which != 8 && evt.which != 0 && evt.which < 48 || evt.which > 57)
    {
        evt.preventDefault();
    }
});

// 0 for null values
// 8 for backspace 
// 48-57 for 0-9 numbers

<input type="number" class="your_class">

Answer 2

您可以阻止使用keydown事件

输入这些字符

var inputBox = document.getElementById("inputBox");

var invalidChars = [
  "-",
  "+",
  "e",
];

inputBox.addEventListener("keydown", function(e) {
  if (invalidChars.includes(e.key)) {
    e.preventDefault();
  }
});

<input type="number" id="inputBox" />

但如果他/她进行复制/粘贴（或通过控制台），用户仍然可以输入它们。为了防止复制/粘贴，您可以对输入的值^[*]进行替换。

var inputBox = document.getElementById("inputBox");

var invalidChars = [
  "-",
  "+",
  "e",
];

inputBox.addEventListener("input", function() {
  this.value = this.value.replace(/[e\+\-]/gi, "");
});

inputBox.addEventListener("keydown", function(e) {
  if (invalidChars.includes(e.key)) {
    e.preventDefault();
  }
});

<input type="number" id="inputBox" />

*您无法在类型设置为number的输入字段上获得输入的值。您可以获取输入的值，只要它是一个数字，即该值通过内部数字检查。如果用户复制/粘贴1e，建议的解决方案将失败。

当您输入1e时会发生什么，输入字段会检查它是否为数字，如果不是（1e不是），则会发出警告：

指定值“1e”不是有效数字。该值必须与以下正则表达式匹配： - ？（\ d + | \ d +。\ d + + |。\ d +）（[eE] [ - +]？\ d +）？

并且value属性设置为""。

如果您检查字段的属性，则会找到valueAsNumber属性。如果输入的值是数字，则输入字段将解析该值并将其存储在valueAsNumber中。由于1e不是数字，因此评估为NaN，NaN分配给valueAsNumber，value设置为""。虽然您仍然在输入字段中看到1e。

我问了一个与这个问题有关的问题，但还没有解决方案。

Get the entered value on number input field, not the parsed

Answer 3

而不是尝试阻止值，您可以尝试替换非数字值。

如果您选择处理密钥代码，则必须处理numKeys，numPad，shift +，crtl +等并尝试刷新，同时焦点位于文本框内失败。防止默认值会比不正确的值停止更多。

$("#input").on("input", function() {
  var nonNumReg = /[^0-9]/g
  $(this).val($(this).val().replace(nonNumReg, ''));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="tel" id="input" />
<div class="alert"></div>

Answer 4

您可以使用jQuery轻松完成

试试此代码

＆＃13;

$(function() {
    $("#input").keypress(function(event) {
        if (event.which != 8 && event.which != 0 && (event.which < 48 || event.which > 57)) {
            $(".alert").html("Enter only digits!").show().fadeOut(2000);
            return false;
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="input" />
<div class="alert"></div>

＆＃13;

Answer 5

由于OP的问题被标记为'angularjs'，最干净的解决方案可能是使用指令。这种方法的几种解决方案先前已在此解释过：

angularjs: allows only numbers to be typed into a text box

Answer 6

$("#input").on("input", function() {
  var nonNumReg = /[^0-9]/g
  $(this).val($(this).val().replace(nonNumReg, ''));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="tel" id="input" />
<div class="alert"></div>

Answer 7

这是一个基于jQuery的简洁解决方案，它基于其他一些解决方案：

$("input[type=number]").on("keydown", function(e) {
        var invalidChars = ["-", "+", "e"]; //include "." if you only want integers
        if (invalidChars.includes(e.key)) {
            e.preventDefault();
        }
});

Answer 8

按照上面的答案的形式，上面的大多数示例都涵盖了它，我只是注意到，当输入“ E”时，这仍然是允许的，因此我认为最好将其添加到数组中。在此示例中，我使用的是 jQuery 3.3.1 。

这样一来，您输入到数组中的任何内容都将被阻止在输入框中键入

注意-将“ elementid”作为您想要将此元素应用到的元素的ID 类似地，如果要将其应用于JQuery中所有数字类型的输入-> $（“ input [type ='number']”）

var invalidChars = ["-", "e", "+", "E"];

$("input[type='number']").on("keydown", function(e){ 
    if(invalidChars.includes(e.key)){
         e.preventDefault();
    }
}):

以上示例应适用于所有具有数字类型的输入，并防止将字符“-”，“ e”，“ +”和“ E”键入到输入中。

更新

也请注意，您可以输入“。”因为它们代表对数字有效的小数点。我使用这个来验证电话号码，显然（对于英国）没有“。”。这样也可能是要添加到数组中的另一个字符。

Answer 9

我在React中使用的一个简单解决方案。

onKeyDown={(evt) => ["e", "E", "+", "-"].includes(evt.key) && evt.preventDefault()}

Answer 10

您可以检查它是否为数字。

// Restrict e, -, + for html input number
$(document).on('keypress', ':input[type="number"]', function (e) {
    if (isNaN(e.key)) {
        return false;
    }
});

Answer 11

JQuery
如果要接受小数点（。），也可以使用以下代码

$('input[Type="Number"]').keypress(function (e) {
    if ('0123456789'.indexOf(e.key)!=-1){}
    else if (e.key=='.' && this.value!='' && (this.value.match("\.") || []).length==0){}
    else{e.preventDefault();}
});

Answer 12

您可以使用一些JQuery代码进行阻止

#!/bin/perl 
use strict;
use Text::CSV_XS qw(csv);
use Data::Dumper;

my $data = csv(in => "data.csv");

my @headings = map {s/\s+/_/gr} @{shift @{$data}};

my @udata = ();

for my $row (@{$data}) {
    for (my $c = 0; $c <= $#headings; $c++) {
        $udata[$c]{$row->[$c]} = 1; 
    }
}

for (my $c = 0; $c <= $#headings; $c++) {
    local $\ = "\n";
    open(OUT, ">", $headings[$c].".pl.csv" );
    print OUT for sort keys %{$udata[$c]};
    close(OUT);
}

这将影响所有数字键入的输入

Answer 13

<input type="number" onChange={(e) => handleInput(e)}/>

function handleInput(e) {
  let value = e.target.value
  if (value.length > 0) {
    ... do something
  }
}

Answer 14

如果您想+在电话号码字段中签名，则可以使用此代码。

var inputBox = document.getElementById("inputBox");

var invalidChars = [
  "-",
  "e",
];

inputBox.addEventListener("keydown", function(e) {
  if (invalidChars.includes(e.key)) {
    e.preventDefault();
  }
});

<input type="number" id="inputBox" />

如何在输入类型Number中阻止+， - ，e？

14 个答案: