0

我正在努力做到这一点，所以我没有为我想使用它的每个输入字段编写一个函数。而是将元素 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>

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

4

1 回答 1

2

您的第二个示例的问题是您试图调用.keypressDOM元素。.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，则使用多重选择器并列出 ID：

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

这就是 jQuery 的工作原理。您可能想阅读一些教程以更好地了解它。

这是修复代码的不太推荐的方法：

我已经说过您将处理程序绑定到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 负责处理所有这些差异。

于 2012-08-11T09:09:16.530 回答