Javascript-将元素 id 从函数变量分配给事件监听器

Question

我正在努力做到这一点，这样我就不必为我想使用它的每个输入字段编写一个函数。而是将元素 id 发送到函数，并且只有一个我可以回收的函数。

像这样工作

    <input name="field" id="field" type="text" onKeyPress="onlyNum()" />

    <script type="text/javascript"> 
        function onlyNum() {
            var name = $("#field");
            name.keypress(function (e) {
                if (e.which > 0 && // check that key code exists
                    e.which != 8 && // allow backspace
                    !(e.which >= 48 && e.which <= 57) // allow 0-9
                    ) {
                    e.preventDefault();
                }
            });
        }
    </script>

但它不是这样工作的，但这就是我想要的:

    <input name="field" id="field" type="text" onKeyPress="onlyNum('field')" />

    <script type="text/javascript"> 
        function onlyNum(theInput) {
            var name = document.getElementById(theInput);
            name.keypress(function (e) {
                if (e.which > 0 && // check that key code exists
                    e.which != 8 && // allow backspace
                    !(e.which >= 48 && e.which <= 57) // allow 0-9
                    ) {
                    e.preventDefault();
                }
            });
        }
    </script>

那么有人知道第二个例子有什么问题吗？我怎样才能让它发挥作用。谢谢

Answer 1

第二个示例的问题是您尝试在 DOM 元素 上调用 .keypress。 .keypress 是 jQuery 对象 的一种方法。

虽然整个方法很奇怪。您想要做的就是在每次按键时将新的事件处理程序绑定(bind)到元素。也就是说，按下三个键后，您已将三个事件处理程序分配给同一个元素，它们都执行相同的操作。

您应该做的是为要绑定(bind)事件处理程序的每个元素分配一个类，使用 jQuery 选择它们并绑定(bind)处理程序一次。

例如:

<input name="field" id="field" type="text" class="someClass"/>

绑定(bind)处理程序:

// will bind the event handler to each 'input' field with class 'someClass'
$('input.someClass').keypress(function (e) {
    if (e.which > 0 && // check that key code exists
        e.which != 8 && // allow backspace
        !(e.which >= 48 && e.which <= 57) // allow 0-9
    ) {
        e.preventDefault();
    }
});

如果您无法修改 HTML，请使用 multiple selector并列出 ID:

// adds the event handler to the elements with the IDs 'field', 'someID' and
// 'someOtherID'
$('#field, #someID, #someOtherID').keypress(function() {
    //...
});

这就是 jQuery 的工作原理。您可能想阅读some of the tutorials以便更好地了解它。

<小时/>

这是修复代码的不太值得推荐的方法:

我已经说过，您将一个处理程序绑定(bind)到 keypress 事件处理程序内的 keypress 事件，这是没有意义的。您已经通过 onkeypress HTML 属性分配了事件处理程序。您不需要元素的 ID。您所要做的就是将 event 对象传递给您的函数。

示例:

<input name="field" id="field" type="text" onKeyPress="onlyNum(event)" />

JavaScript:

function onlyNum(e) {
    if (e.which > 0 && // check that key code exists
        e.which != 8 && // allow backspace
        !(e.which >= 48 && e.which <= 57) // allow 0-9
    ) {
        e.preventDefault();
    }
}

这种方法最大的区别是 event 是一个原生事件对象，而不是一个 jQuery 事件对象。这也意味着在 IE8 及更低版本中调用 e.preventDefault() 将失败，因为此方法不存在。此外，您可能必须使用 e.keyCode 而不是 e.which。 jQuery 解决了所有这些差异。