3

我使用此代码并且它有效

<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 或右键单击粘贴）时，它不起作用
有人知道如何解决它

4

7 回答 7

4

如果您擅长使用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>标签中使用，用户将无法在无效状态下提交。

我刚刚读到您无权访问标记，因此深表歉意。我将把它作为信息性答案。

于 2013-01-29T14:40:23.840 回答
1

在这种情况下，<<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/

于 2014-06-18T01:01:22.380 回答
0

我知道我参加聚会有点晚了。

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 人，我不确定这是否是解决问题的好方法，或者是否需要考虑性能问题。但是，它对我有用。

于 2015-03-03T16:37:10.937 回答
0

如果您不能使用 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);

无论如何，您可以在此处查看带有测试的原始脚本，并在此处查看上述代码的演示。

于 2014-11-19T11:56:08.123 回答
0

这是一个错误？

document.getElementById(**"txtChar"**).addEventListener("keypress", function(){
                return isNumberKey(event);
            }, false);
于 2013-01-29T14:42:19.027 回答
0

试试这个代码兄弟。我希望它会帮助你很多我使用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>
于 2014-06-18T01:20:59.533 回答
0

事件在函数内部未知。所以提到要运行的事件对象：

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);
于 2013-01-29T14:40:33.083 回答