在具有属性名称的输入上使用 keyup

Question

我正在做申请，但 "addEventListener" 和 "keyup" 有问题。所以，我有这个 html 代码：

<input class="width50" type="number" name="metraz" value="<?php echo $metraz; ?>" />

和JS代码：

document.getElementsByName("metraz")[0].addEventListener("keyup",validate_numb("metraz"));

如果我写 html "onkeyup="validate_numb('nameoffield')" - 会很好，但如果我尝试我之前粘贴的代码 - 那么就不是正在工作。有人对我的错误提出建议吗？

编辑。这就是所有代码（这里有些东西不起作用，因为函数 validate_numb 调用我 document.getElementsByName(name)[0].value - 在我使用 for 循环和数组后未定义）

   var items = [
        "metraz",
        "cena_dodatkowa_ogrzewanie"
    ];
    for(i=0; i<items.length; i++){
        console.log(items[i]);
       document.getElementsByName(items[i])[0].addEventListener("keyup", function(){
       validate_numb(items[i]) 
        }); 
    }
    

    function validate_numb(name){//argumentem jest nazwa pola
        var input = document.getElementsByName(name)[0].value;
        var parsed_input = parseInt(input);//wartosc pola zamieniana na liczbe całkowitą
        if(isNaN(parsed_input) || parsed_input<0 || input!=parsed_input){
            document.getElementsByName(name)[0].value="";
            return false;
        }else{
            return true;
        }
    }

Answer 1

addEventListener 的第二个参数需要是一个函数。

您正在立即调用 validate_numb 并传递其 return 值（这可能不是函数）。

对此的快速而肮脏的解决方案是：

...addEventListener("keyup",function () { validate_numb("metraz") });

更好的解决方案是重写函数，这样就根本不需要 name。

function validate_numb(event) {
    var element_to_test = this;
    // etc etc
}

...addEventListener("keyup", validate_numb);

Answer 2

您需要插入回调函数，而不是表达式。

在 JS 中，当您添加侦听器或定义未来事件时，您应该提供对事件发生时将使用的函数的引用。如果立即调用该函数并将结果保存在监听器中，下次事件发生时您将无所事事。

变化：

document.getElementsByName("metraz")[0].addEventListener("keyup",validate_numb("metraz"));

收件人：

document.getElementsByName("metraz")[0].addEventListener("keyup", function(event) {
    validate_numb("metraz")
});

在具有属性名称的输入上使用 keyup

Using keyup on input with attribute name

jquery

html

addeventlistener

keyup