webentwicklung-frage-antwort-db.com.de

JavaScript KeyCode vs CharCode

Das Problem:

  • Beschränken Sie zulässige Zeichen in einer HTML-Eingabe auf AZ.
  • Für geschäftliche Anforderungen muss dies auf KeyPress erfolgen, damit das Zeichen nicht einmal in der Eingabe erscheinen darf.
  • Tab, Enter, Pfeile, Backspace, Shift sind erlaubt. Der Benutzer muss in der Lage sein, sich frei in der Textbox zu bewegen, Zeichen zu löschen usw. usw.

Dies ist der Ausgangspunkt meines Codes ...

var keyCode = (e.keyCode ? e.keyCode : e.which);

Jeder Wert, den ich in keyCode erhalte, entspricht jedoch nicht einem der Zeichentabellen, die ich im Web gesehen habe. Zum Beispiel gibt mir das Zeichen "h" einen Rückkehrcode von 104.

Unterscheidet sich KeyCode von CharCode? Welcher Code enthält die Steuerzeichen? Muss ich konvertieren?

Wie kann ich die Eingabe auf AZ beschränken und die benötigten Schlüssel in JavaScript zulassen?

javascriptkeycode
41
Remotec

Die Antworten auf alle Ihre Fragen finden Sie auf die folgende Seite .

... aber zusammenfassend:

  • Das einzige Ereignis, von dem Sie (im Gegensatz zu den Schlüsselcode-Informationen) zuverlässig Zeicheninformationen erhalten können, ist das Ereignis keypress.
  • Im Ereignis keypress speichern alle Browser außer IE <= 8 den Zeichencode in der Eigenschaft which des Ereignisses. Die meisten, aber nicht alle dieser Browser speichern ebenfalls den Zeichencode den Zeichencode in der Eigenschaft charCode.
  • Im Ereignis keypress speichert IE <= 8 den Zeichencode in der Eigenschaft keyCode.

Das heißt, um den Zeichencode zu erhalten, der dem Tastendruck entspricht, funktioniert Folgendes überall, vorausgesetzt, ein Tastendruckereignisobjekt wird in einer Variablen namens e gespeichert:

var charCode = (typeof e.which == "number") ? e.which : e.keyCode

Dies gibt im Allgemeinen einen Zeichencode zurück, in dem einer existiert, und ansonsten eine 0. Es gibt einige Fälle, in denen Sie einen Wert ungleich Null erhalten, wenn Sie dies nicht tun sollten:

  • In Opera <10.50 für Schlüssel Insert, Delete, Home und End
  • In neueren Versionen von Konqueror für Tasten ohne Zeichen.

Die Problemumgehung für das erste Problem ist ein wenig umständlich und erfordert auch die Verwendung des Ereignisses keydown.

61
Tim Down

Guter Kummer. KeyboardEvent. [Key, char, keyCode, charCode, die] sind alle veraltet oder haben derzeit ausstehende Fehler gemäß den API-Dokumenten von Mozilla - https://developer.mozilla.org/en-US/docs/Web/API)/KeyboardEvent . Sogar JQuery übergibt das Geld an diesen und lässt den Benutzer es herausfinden https://api.jquery.com/keydown/ .

10
nicopolyptic

Tatsächlich ist 104 der ASCII Code für Kleinbuchstaben 'h'. Um den ASCII Code des eingegebenen Zeichens bei Tastendruck zu erhalten, können Sie einfach e.which || e.keyCode, und Sie brauchen sich keine Gedanken über das Gedrückthalten von Tasten zu machen, da bei getipptem Text das Drücken der Taste in allen Browsern automatisch wiederholt wird (entsprechend dem ausgezeichneten http://unixpapa.com/js/key.html) ).

Alles, was Sie wirklich brauchen, ist:

<input id="textbox">

<script type="text/javascript">
document.getElementById('textbox').onkeypress = function(e){
  var c = e.which || e.keyCode;
  if((c > 31 && c < 65) || (c > 90 && c < 97) || (c > 122 && c !== 127))
    return false;
};
</script>

Probieren Sie es aus: http://jsfiddle.net/wcDCJ/1/

(Die ASCII Codes sind von http://en.wikipedia.org/wiki/Ascii )

5
Han Seoul-Oh

onKeyPress hat verschiedene Codes für Groß- und Kleinbuchstaben. Sie werden wahrscheinlich feststellen, dass Sie durch Einschalten des Feststelltasters und anschließendes Eingeben Ihres Buchstabens den erwarteten Code erhalten

onKeyUp und onKeyDown haben die gleichen Zeichencodes für Groß- und Kleinbuchstaben. Es wird empfohlen, onKeyUp zu verwenden, da es am nächsten an onKeyPress liegt

2
James Long

/ * Sie erhalten keinen keyCode bei Tastendruck für nicht druckbare Tasten. Warum erfassen Sie sie nicht stattdessen bei gedrückter Taste? * /

function passkeycode(e){
    e= e || window.event;
    var xtrakeys={
        k8: 'Backspace', k9: 'Tab', k13: 'Enter', k16: 'Shift', k20: 'Caps Lock',
        k35: 'End', k36: 'Home', k37: 'Ar Left', k38: 'Ar Up', k39: 'Ar Right',
        k40: 'Ar Down', k45: 'Insert', k46: 'Delete'
    },
    kc= e.keyCode;
    if((kc> 64 && kc<91) || xtrakeys['k'+kc]) return true;
    else return false;
}

inputelement.onkeydown=passkeycode;

kc> 64 && kc <91 // a-zA-Z

xtrakeys ['k' + integer]) definiert spezielle erlaubte Schlüsselcodes

0
kennebec

Hier ist ein Beispiel für ein Markup:

<form id="formID">
    <input type="text" id="filteredInput">
    <input type="text" id="anotherInput">
</form>

Die folgende Logik kann verwendet werden, um Tastatureingaben abzufangen (in diesem Fall über einen jQuery Document Ready-Wrapper).

Es liest sich vielleicht ein wenig albern, aber im Grunde überprüfe ich, ob alles erlaubt ist (in Ihrem Fall ist die Groß- und Kleinschreibung der Buchstaben A bis Z nicht relevant) und tue nichts. Mit anderen Worten, die Standardaktion ist zulässig, aber jede andere Eingabe als Alpha wird verhindert.

Standardtastaturnavigation wie Pfeiltasten, Start, Ende, Tabulator, Rücktaste, Löschen usw. ist aktiviert und zulässig.

HINWEIS: Dieser Code wurde ursprünglich geschrieben, um Benutzereingaben zu erfüllen, die nur alphanumerische Werte (AZ, AZ, 0-9) zulassen, und ich habe diese Zeilen als Kommentare intakt gelassen.

        <script>
            jQuery( document ).ready( function() {

                // keydown is used to filter input
                jQuery( "#formID input" ).keydown( function( e ) {
                    var _key = e.which
                        , _keyCode = e.keyCode
                        , _shifted = e.shiftKey
                        , _altKey = e.altKey
                        , _controlKey = e.ctrlKey
                    ;
                    //console.log( _key + ' ' + _keyCode + ' ' + _shifted + ' ' + _altKey + ' ' + _controlKey );

                    if( this.id === jQuery( '#filteredInput' ).prop( 'id' ) ) {
                        if(
                            // BACK,         TAB
                            ( _key === 8 || _key === 9 )    // normal keyboard nav
                        ){}

                        else if(
                            // END,           HOME,          LEFT,          UP,            RIGHT,         DOWN
                            ( _key === 35 || _key === 36 || _key === 37 || _key === 38 || _key === 39 || _key === 40 )  // normal keyboard nav
                        ){}

                        else if(
                            // DELETE
                            ( _key === 46 ) // normal keyboard nav
                        ){}

                        else if(
                            ( _key >= 65 && _key <= 90 )    // a- z

                            //( _key >= 48 && _key <=  57 && _shifted !== true ) ||   // 0 - 9 (unshifted)
                            //( _key >= 65 && _key <=  90 ) ||                        // a- z
                            //( _key >= 96 && _key <= 105 )                           // number pad 0- 9
                        ){}

                        else {
                            e.preventDefault();
                        }
                    }

                });
            });
        </script>
0
Mac