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对象的方法。

但整个方法很奇怪。你想要做的是在每次按键时将新的事件处理程序绑定到元素。也就是说，在按下三个键之后，你已经为同一个元素分配了三个事件处理程序，它们都在做同样的事情。

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

例如：

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

绑定处理程序：

// 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以更好地了解它。

以下是修改代码的 less 推荐方法：

我已经说过你将处理程序绑定到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事件对象。这也意味着调用e.preventDefault()将在IE8及更低版本中失败，因为此方法不存在。此外，您可能必须使用e.keyCode而不是e.which。 jQuery处理所有这些差异。

Javascript-从函数变量向事件侦听器分配元素id

1 个答案: