html "onkeypress" 属性的多个函数

Question

我有这个HTML文本输入如下

<label style="color: white;" for="id">ID:</label>
            <input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57" maxlength="9" name="id" id="id">

现在，在我成功添加的onkeypress中，只能输入数字。但是我有一个 JavaScript 函数叫做：

function checkID() {

而且我还希望在输入每个数字后调用此函数。但我就是无法让它同时完成这两个操作（只允许数字并调用该函数）。

提前致谢！伊泰.

Answer 1

您可以在 checkID 函数中输入数字验证。

<input type="text" onkeypress="return checkID(event,this)" maxlength="9" name="id" id="id">

function checkID(e,elem) {
    if !(e.charCode >= 48 && e.charCode <= 57)
        return false;
    // continue checking the id...
}

Answer 2

或者通过 html 附加您的函数，您可以使用纯 javascript:

添加它

document.querySelector("your-html-selector").addEventListener("keypress", function(event) { 
    // all your code here
});

这可以让您的 html 保持整洁，并且您的代码易于阅读，尤其是当您尝试在事件发生时执行多个函数等时。

html "onkeypress" 属性的多个函数

html multiple functions for "onkeypress" attribute

html

javascript

function

onkeypress