如何在一个html标记上调用多个onkeyup事件

how to call multiple onkeyup events on one html-tag

本文关键字：调用 事件 onkeyup 一个 html      更新时间：2023-09-26

我可以在同一个html输入标记上调用多个onkeyup事件吗？

<input style="float: left; width: 50px;" id="PersonLength" name="PersonLength" onkeyup="checkNr(this.id)" onkeyup="fill()" type="text">

像那样的东西？

<input style="float: left; width: 50px;" id="PersonLength" name="PersonLength"  
onkeyup="checkNr(this.id), fill()" type="text">

还是像这样？我都试过了，但我可能有错误的语法？或者有更好的方法吗？

您不调用onkeyup事件，它们是事件，它们发生。

您可以使用EventListener API来添加多个事件侦听器。

var input = document.getElementById("my_input");
input.addEventListener("keyup", function () {
    doSomething();
});
input.addEventListener("keyup", function () {
    doSomethingElse();
});
// .. etc

另一种表示法是：

<input .. onkeyup="checkNr(this.id); fill()" type="text">
                                   ^- semicolon

这类似于：

var input = document.getElementById("my_input");
input.addEventListener("keyup", function () {
    checkNr(input.id);
    fill();
});

去罗马的另一条路：

如果您想调用多个函数并将事件设置为内联，则可以编写一个额外的方法来调用所有方法。

例如

<input style="float: left; width: 50px;" id="PersonLength" name="PersonLength" onkeyup="yourElemOnKeyup(this.id)" type="text">

编写脚本

    function yourElemOnKeyup(id){
       checkNr(id);
       fill();
}

非常简单。使用任何可以使用的方法

onchange/onclick="method1() && method2();"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="">
         <input type="number" name="admissionNumber" id="admissionNumber" onkeyup="getStudentName(); getStudentClassName()">
    </form>
    <script>
      function getStudentName(){
      }
      function getStudentClassName(){
      }
    </script>
</body>
</html>
相关文章：