javascript - 无法让 event.charCode 工作

Question

我有 3 个 div，我需要将它们放入仅接受数字的位置。我尝试附加“onkeypress”功能，但它仍然接受数字。这里有人可以帮助我吗？我似乎找不到问题出在哪里。

这是代码:

document.getElementById("cc-num").maxLength = 16;
document.getElementById("zip").maxLength = 5;
document.getElementById("cvv").maxLength = 3;
$("#cc-num").append("onkeypress='return event.charCode >= 48 && 
event.charCode <= 57'");// makes the Card Number div only digit 
available.
$("#zip").append("onkeypress='return event.charCode >= 48 && 
event.charCode <= 57'"); // makes the Zip div only digit available
$("#cvv").append("onkeypress='return event.charCode >= 48 && 
event.charCode <= 57'"); // makes the cvv div only digit available.

Answer 1

为了访问该事件，您需要 keypress 事件来调用一个函数，该函数会将事件作为参数传递给它。

此外，不要使用内联 HTML 事件属性(即 onkeypress)。这就是 25 年前事件处理程序的建立方式，并且由于某些上帝遗弃的原因，它不会消失。有many reasons 不要使用它们，而是遵循现代的、基于标准的方法。

// Set up your event callbacks in JavaScript, not with inline HTML attributes.

// The function you supply as the callback will automatically
// recieve a reference to the event
$("#cc-num").on("keypress", function(evt){
 if(evt.charCode >= 48 && evt.charCode <= 57){
   console.log(evt.charCode);
 } else {
   evt.preventDefault();  // Cancel the event
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="cc-num">

顺便说一句，如果您使用 HTML5 input type="number"，则不需要任何此代码，因为首先只允许数字输入。

<input type="number">

或者，因为您有一个模式，所以带有信用卡正则表达式的文本框上的 HTML5 pattern 属性就可以解决问题:

:valid { background-color:rgba(0,255,0,.3); }
:invalid { background-color:rgb(255,0,0,.3); }

<input type="text" pattern="\d{4}-\d{4}-\d{4}">