Question

我开发了一个ASP.NET MVC 5 Web App，我有这个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()。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

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

Answer 2

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

key = event.which;

Answer 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中。

Answer 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>

Answer 5

你需要的是在onkeydown属性中返回boolean： onkeydown ='return IsValidKey（event）;'

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

也请参阅此答案：https://stackoverflow.com/a/4379459/4768374

使用jquery和javascript函数的onkeydown

5 个答案: