onkeydown mit Jquery und Javascript-Funktion

Question

Ich habe ein ASP.NET MVC 5 Web App zu entwickeln, und ich habe diesen HTML:

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

Und diese Funktion 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); 
} 

Aber es funktioniert nicht Arbeit, obwohl ich Schlüsselcode in code Variable bekommen kann. Ich versuche nur Nummern [0..9] und Rücktaste zuzulassen, aber ich kann Buchstaben eingeben.

Die erste Version war:

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

Aber FireFox beschwert sich über window.event existiert nicht.

Ich muss diesen Code auf so viel wie möglich Browsern ausführen können.

Und das ist kein Duplikat, weil ich den Code in Firefox bekomme und die Funktion erlaubt, Buchstaben einzugeben.

Wie kann ich dieses Problem beheben?

Answer 1

IsValidKey(this) geht nicht in das event Objekt, es ist in dem HTML-Element übergeben. Um das Ereignis zu übergeben, müssen Sie event wie: IsValidKey(this,event) angeben. Auch müssen Sie return in Ihrem Inline-Js verwenden, andernfalls müssen Sie evt.preventDefault() in Ihrem Rückruf aufrufen.

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);' />

Oder statt Inline-js verwenden Sie addEventListener oder jQuery .keydown Methode verwenden, um Ihre Zuhörer und die event Objekt hinzufügen wird automatisch

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

Answer 2

Sie folgenden Code in Firefox verwenden:

key = event.which; 

Answer 3

ich es auf diese Weise in jQuery immer tun und haben keine Probleme mit Browser-Unterstützung hatte.

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

Wie, warum ist Firefox über window.event beschweren - Browser haben unterschiedliche Ereignismodelle, und soweit ich weiß, in Firefox existiert window.event einfach nicht.

Answer 4

Basierend auf geben bekommen eine Antwort, die jemand gepostet hat, aber er löscht sie, das ist meine Lösung:

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

Was Sie brauchen, ist die Boolesche im onkeydown Attribut zurückzukehren: onkeydown = 'Rückkehr IsValidKey (event);'

Wenn der Event-Handler zurückgibt, blockiert false die Ausbreitung des Ereignisses oder das Aufblubbern.

diese Antwort Siehe auch: [? Window.event.keyCode, wie es auf Firefox tun] https://stackoverflow.com/a/4379459/4768374