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

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

你应该做的是为每个要绑定事件处理程序的元素分配一个类，使用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以更好地了解它。

---

这里是修复你的代码少推荐方式：

我已经说过，你要绑定一个处理器到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负责所有这些差异。