javascript输入只允许数字

Question

我使用这个代码，它的工作原理

<HTML>
  <HEAD>
    <SCRIPT language=Javascript>
       <!--
       function isNumberKey(evt)
       {
          var charCode = (evt.which) ? evt.which : event.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
       }
       //-->
    </SCRIPT>
  </HEAD>
  <BODY>
    <INPUT id="txtChar" onkeypress="return isNumberKey(event)" 
           type="text" name="txtChar">
  </BODY>
</HTML>

但是我没有访问html，只有javascript

document.getElementById("txtChar").addEventListener("keypress", <<your code>>, false);

什么应该到位<<your code>> ？

ps发现了这个组件的另一个错误：
当你复制粘贴（ctrl-v或右键单击粘贴）时，它不起作用
有人可以知道如何解决它

Answer 1

如果您使用HTML5很酷并且只针对现代浏览器，则required新的属性和pattern 。 例：

<input id="txtChar" type="number" required pattern="\d+"/>

你可以通过CSS来解决这个问题

#txtChar:required:valid {
    border: 1px solid green;
}

#txtChar:required:invalid {
    border: 1px solid red;
}

如果在<form>标记内使用，则用户将无法以无效状态提交。

我刚刚读到你无法访问标记，所以道歉。 我将把它留作信息性答案。

Answer 2

在<<your code>>添加要处理它的函数的名称，在这种情况下是isNumberKey ; 你还需要添加evt.preventDefault(); 在return false;之前return false;

以下此功能仅接受与0到9的数字对应的代码，并忽略点（“。”），连字符（“ - ”）和减号（“ - ”）。

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode == 46 || charCode > 31 && (charCode < 48 || charCode > 57)){
        evt.preventDefault();
        return false;
    }
    return true;
}

配置HTML5浏览器的输入字段：

txtChar = document.getElementById("txtChar")
txtChar.addEventListener("keypress", isNumberKey, false);

//Attributes
txtChar.type = "number";
txtChar.min = 0;
txtChar.pattern = "\\d+";
txtChar.placeholder = "Only integer positive numbers";
txtChar.required = "required";

工作示例包括来自jAndy答案的样式： http ： //jsfiddle.net/pL9Zk/

Answer 3

事件内部功能未知。 所以提到要运行的事件对象：

~~document.getElementById（“myElement”）。addEventListener（“keypress”，function（ event ）{return isNumberKey（event）;}，false）;~~

编辑：问题有所改变，所以引用答案：
1.将“myElement”更改为“txtChar”
2.将事件对象包含为参数

document.getElementById("txtChar").addEventListener("keypress", function(event){
                    return isNumberKey(event);
                }, false);

Answer 4

这是一个错误？

document.getElementById(**"txtChar"**).addEventListener("keypress", function(){
                return isNumberKey(event);
            }, false);

Answer 5

试试这个代码兄弟。 我希望它会帮助你很多我使用jQUERY。

<head>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>


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

</body>


<script>

    $("#txtChar").keypress(function(e) {
       var charCode = (e.which) ? e.which : event.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
    });

</script>

Answer 6

如果你不能使用HTML5 <input type="number">那么我将正则表达输入值只允许数字。 我修改了我写的脚本来完成类似的任务。 它允许粘贴和剥离任何非整数字符。

var arrowKeys = [37, 38, 39, 40];  

function stripChars( e ) {
  // Don't execute anything if the user is just moving the cursor around and
  // not really entering anything new.
  if(arrowKeys.indexOf(e.keyCode) !== -1){ return; }

  var elem = e.currentTarget,
      cursorPos = elem.selectionEnd;

  // strip any unwanted character and assign the value back
  elem.value =  elem.value.replace(/\D/g,'');
  // this avoids the cursor shifting to the end of the input 
  // when inserting an integer in the middle of an already existing number
  elem.selectionEnd = cursorPos;
  elem.focus();
}

var elem = document.getElementById('elem');

elem.addEventListener('keyup', stripChars, false); 
elem.addEventListener('paste', stripChars, false);

无论如何，你可以查看与测试原始脚本在这里和上面的代码演示在这里。

Answer 7

我知道我有点迟到了。

jAndy的HTML5示例可能是支持它的浏览器的最佳答案。 Josaph的JavaScript答案很好，因为它激发了我解决提问者的附录和问题的答案。

以下抛出与正则表达式匹配的输入（不是数字，用空字符串替换），并且在输入时随时调用，即使是粘贴也是如此。

 function stripNonNumeric() {
   this.value = this.value.replace(/\D+/g, '');
 }

 var txtChar = document.getElementById("txtChar");
 if (txtChar.addEventListener) {
   txtChar.addEventListener("input", stripNonNumeric);
 } else if (txtChar.attachEvent) {
   txtChar.attachEvent("oninput", stripNonNumeric);
 }

我不是一个JavaScript人，我不确定这是否是解决问题的好方法，或者是否存在需要考虑的性能问题。 但是，它对我有用。

javascript输入只允许数字

问题描述

7 个解决方案

解决方案1
4 2013-01-29 14:40:23

解决方案2
1 2014-06-18 01:01:22

解决方案3
0 2013-01-29 14:40:33

解决方案4
0 2013-01-29 14:42:19

解决方案5
0 2014-06-18 01:20:59

解决方案6
0 2014-11-19 11:56:08

解决方案7
0 2015-03-03 16:37:10

javascript输入只允许数字

问题描述

7 个解决方案

解决方案1 4 2013-01-29 14:40:23

解决方案2 1 2014-06-18 01:01:22

解决方案3 0 2013-01-29 14:40:33

解决方案4 0 2013-01-29 14:42:19

解决方案5 0 2014-06-18 01:20:59

解决方案6 0 2014-11-19 11:56:08

解决方案7 0 2015-03-03 16:37:10

解决方案1
4 2013-01-29 14:40:23

解决方案2
1 2014-06-18 01:01:22

解决方案3
0 2013-01-29 14:40:33

解决方案4
0 2013-01-29 14:42:19

解决方案5
0 2014-06-18 01:20:59

解决方案6
0 2014-11-19 11:56:08

解决方案7
0 2015-03-03 16:37:10