Question

我有3个div，我需要让他们只接受数字。我试图追加＆＃34; onkeypress＆＃34;功能，但它仍然接受数字。这里有人可以帮助我吗？我似乎无法找到问题依赖的地方。

这是代码：

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}">

不能让evet.charCode工作

1 个答案: