javascript - onkeydown 与 jquery 和 javascript 功能

Question

我正在开发一个 ASP.NET MVC 5 Web 应用程序并且我有这个 html:

<div class="group">
    <input type="text"
            class="productClass"
            name="Configurations[0].RemainingCodes"
            id="Configurations[0].RemainingCodes"
            onkeydown='IsValidKey(event);'
            required />
</div>

还有这个 Javascript 函数:

function IsValidKey(e) {
    e = e || window.event;
    var code = e.keyCode;

    return (e.keyCode >= 48 && e.keyCode <= 57) || e.keyCode == 8 || e.keyCode == 46 || (e.keyCode >= 96 && e.keyCode <= 105);
}

虽然我可以在 code 变量中获取键码，但它不起作用。我试图只允许数字 [0..9] 键和退格键，但我可以输入字母。

第一个版本是这样的:

和javascript:

function IsValidKey()
{
    return (window.event.keyCode >= 48 && window.event.keyCode <= 57) || window.event.keyCode == 8 || window.event.keyCode == 46 || (window.event.keyCode >= 96 && window.event.keyCode <= 105);
}

但是 FireFox 提示 window.event 不存在。

我需要能够在尽可能多的浏览器上运行此代码。

这不是重复的，因为我在 Firefox 中获取代码并且该函数允许输入字母。

我该如何解决这个问题？

Answer 1

IsValidKey(this) 传入的不是event对象，是传入html元素。要传递事件，您必须指定 event，例如:IsValidKey(this,event)。此外，您还必须在内联 js 中使用 return，否则您需要在回调中调用 evt.preventDefault()。

function IsValidKey(element,evt) {
  var event = ((window.event) ? (window.event) : (evt));
  
  return (event.keyCode >= 48 && event.keyCode <= 57) || 
         event.keyCode == 8 || 
         event.keyCode == 46 || 
         (event.keyCode >= 96 && event.keyCode <= 105);
}

<input type="text" onkeydown='return IsValidKey(this,event);' />

或者不使用内联 js，您可以使用 addEventListener，或 jQuery 的 .keydown 方法来添加您的监听器，event 对象将得到自动传入

document.querySelector("#inputID").addEventListener("keydown",IsValidKey);
//OR jQuery("#inputID").keydown(isValidKey);
function IsValidKey(evt) {
/*.... rest of code ....*/