Question

我想验证一个文本框，以便它只需要数值。如果用户试图按字母键，则必须忽略键击，即不能输入任何内容。

如何做到这一点？

Answer 1

在HTML页面中使用此代码：

    <HTML>
   <HEAD>
   <SCRIPT language=Javascript>
      <!--
      function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (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>

Answer 2

您可能需要使用onkeypress事件。

可以在此处找到执行相反操作的示例（输入字段接受除数字之外的所有内容）：http://www.w3schools.com/jsref/event_onkeypress.asp

Answer 3

如何与此相似的东西

//Bind this keypress function to all of the input tags
$("input").keypress(function (evt) {
//Deterime where our character code is coming from within the event
var charCode = evt.charCode || evt.keyCode;
if (IsNumeric(charCode)) { //key's keycode
return false;
}
});

Answer 4

W3C建议使用oninput事件，这是未来的证明，并负责没有键盘的设备。如果您的目标浏览器支持oninput，请不要使用任何键盘事件。

Answer 5

在现代浏览器中使用HTML5，您可以使用<input type="number">（有关示例，请参阅Dive Into HTML5）。不过，您需要为旧版浏览器提供后备功能，所以现在就开始吧。这适用于所有主流浏览器。但是，它不会阻止用户粘贴或拖动非数字内容。

jsFiddle：http://jsfiddle.net/JCUT2/

var textBox = document.getElementById("foo");

textBox.onkeypress = function(e) {
   e = e || window.event;
   var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
   if (/\D/.test(String.fromCharCode(charCode))) {
       return false;
   }
};

Answer 6

您可以创建一个javascript函数，每次按下文本框中的某个键时都会调用该函数（使用onkeypress事件）。

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

     return true;
  }

Code sample source

Answer 7

我最近处理相同的情况（但相反 - 我想只字母字符）。我最初只考虑使用keypress事件，但这有一些致命的缺陷：

用户仍然可以将无效数据粘贴到字段中;
用户可以将无效文本拖到字段中;
取消按键会使某些有效输入无效（例如，热键），除非您特别注意元键（我不能以强大，完整和可移植的方式做到这一点）;
自动完成;
依此类推任意数量的非键盘输入法。

幸运的是，至少Firefox和IE9有一个解决方案：它们有一个input事件可以触发任何方式的输入法，无论是键击还是粘贴操作等等。 IE＆lt; 9没有那个，但它们确实有一个paste事件来处理最常见的用例，但是在粘贴实际发生之前要小心它会触发，所以你必须取消粘贴，然后手动完成大部分（IE特定的）粘贴工作（只需几行代码，但仍然有点恼人）。

我正在为不支持其他浏览器的内部网络开发，所以我还没有研究过WebKit可用的内容。 DOM Level 3规范有一个textinput event，但至少Firefox还不支持它。

如何在JavaScript的表单验证中禁用键盘输入

7 个答案: