带有 jquery 和 javascript 函数的 onkeydown答案

【问题标题】：onkeydown with jquery and javascript function带有 jquery 和 javascript 函数的 onkeydown
【发布时间】：2016-04-26 09:47:06
【问题描述】：

我正在开发一个 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 中获取代码并且该功能允许输入字母。

我该如何解决这个问题？

【问题讨论】：

window.event.keyCode how to do it on Firefox?的可能重复
onkeydown='return IsValidKey(event);'
blog.niftysnippets.org/2011/11/story-on-return-false.html

标签： javascript

【解决方案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);
}

&lt;input type="text" onkeydown='return IsValidKey(this,event);' /&gt;

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

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

【讨论】：

【解决方案2】：

您可以在 Firefox 中使用以下代码：

key = event.which;

【讨论】：

【解决方案3】：

我在 jQuery 中总是这样做，并且在浏览器支持方面没有遇到问题。

$(document).keydown(function (e) {
        var c = e.which;
        e.preventDefault;
        return (c >= 48 && c <= 57) || c == 8 || c == 46 || (c >= 96 && c <= 105);
    });

为什么 Firefox 抱怨 window.event - 浏览器有不同的事件模型，据我所知，window.event 在 Firefox 中根本不存在。

【讨论】：

谢谢，但该功能中有一些东西可以让我输入字母。

【解决方案4】：

根据某人发布但他/她将其删除的答案，这是我的解决方案：

function IsValidKey(e) {
    var c = e.which;

    if (!((c >= 48 && c <= 57) || c == 8 || c == 46 || (c >= 96 && c <= 105)))
        e.preventDefault();
}

HTML：

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

【讨论】：

【解决方案5】：

您需要在 onkeydown 属性中返回布尔值： onkeydown='return IsValidKey(event);'

如果事件处理程序返回 false 则阻止了事件的传播，或者冒泡。

也看到这个答案：https://stackoverflow.com/a/4379459/4768374

【讨论】：