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>>？

P.S。发现了这个组件的另一个错误：
当你复制粘贴（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;

以下此功能仅接受与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);

无论如何，您可以使用测试here和上述代码here的演示来查看原始脚本。

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 个答案: