Question

我试图捕获页面上所有输入字段的密钥。

我目前的代码是：

var els = document.querySelectorAll('input');
for (var i = 0; i < els.length; i += 1) {
    addEvent('keyup', els[i], makeHandler(els[i]));
}

function makeHandler(field) {       
    console.log(field.value);

}

function addEvent(evnt, elem, func) {
    if (elem.addEventListener) {
        elem.addEventListener(evnt,func,false);
    } else if (elem.attachEvent) { 
        elem.attachEvent("on"+evnt, function(e) {
            e = e || window.event; 
            if (!e.preventDefault) {
                e.preventDefault = preventDefaultOnIE;
            }
            func.call(this, e);
        });
    } else { // No much to do    
        elem[evnt] = func;       
    }
}

但由于某种原因，它只捕获页面加载的值，而不是一旦我开始输入任何字段。

任何想法我做错了什么？

Answer 1

问题在于您的makeHandler功能。正在评估makeHandler(els[i])，并且返回值（在这种情况下为undefined）作为处理程序传递给addEvent。尝试：

function makeHandler(field) {
    return function() { 
        console.log(field.value);
    };
}

这样，makeHandler(els[i])将返回函数，addEvent可以附加到keyup。

或者，您也可以使用：

function makeHandler() {
    console.log(this.value); // 'this' will be the field that the event occurred on
}

然后使用：

addEvent('keyup', els[i], makeHandler);

边注

我发现代码中有轻微错误：

else { // No much to do    
    elem[evnt] = func;       
}

我认为您确实想要设置elem["on" + evnt]。

Answer 2

这就是你要找的东西：

<script>
    $(document).ready(function () {
        $("input").keyup(function () {
            alert("keyup");
        });
    });
</script>

Answer 3

我喜欢将脚本嵌入到函数中，因此我可以在IDE中将其最小化并在全局中打开和关闭它。换句话说，给它起一个名字。

attachKeyupListenerToInputElements();
function attachKeyupListenerToInputElements(){
    var inputs = doc.querySelectorAll('input');
    for (var i = 0; i < inputs.length; i += 1) {
        inputs[i].addEventListener("keyup", keyupHandler);
    }

    function keyupHandler() {
        console.log(this.value);
    }
}

在所有输入字段上监听密钥

3 个答案:

边注