webentwicklung-frage-antwort-db.com.de

Wie man ein Zeichen dekodiert, das vom Ereignis-Handler von jQuery keydown () gedrückt wird

Ich muss herausfinden, welches Zeichen aus dem Handler in ein Textfeld eingegeben wurde, das von der keydown-Funktion von jQuery aufgerufen wird. key.which gibt mir nur den Schlüsselcode, aber ich muss herausfinden, welches ASCII - Zeichen key darstellt. Wie mache ich das?

jqueryevent-handlingcharacterkeydown
64
Chetan

Für die Zeicheneingabe wird empfohlen, keypress() zu verwenden, die den aktuellen ASCII - Code des gedrückten Zeichens meldet. Es kümmert sich automatisch um die Groß- und Kleinschreibung und ignoriert das Drücken von Zeichen ohne Zeichen. In beiden Fällen können Sie fromCharCode () verwenden, um in eine Zeichenfolgendarstellung zu konvertieren. Z.B.

var c = String.fromCharCode(e.which) // or e.keyCode

Denken Sie daran, dass Sie für keydown() und keyup() den Fall mit dem e.shiftKey-Status verfolgen müssen.

93
Max Shawabkeh

Mit dem Ereignis keyPress können Sie ermitteln, welches Zeichen eingegeben wurde. ( Siehe folgende Problemumgehung für das Tastendruckereignis ).

keydown und keyup geben einen Code an, der angibt, welche Taste gedrückt wird, während keypress angibt, welches Zeichen eingegeben wurde.

Mit jQuery e.which können Sie den Schlüsselcode abrufen, und mit String.fromCharCode können Sie das bestimmte Zeichen abrufen, das gedrückt wurde (einschließlich shiftKey).

DEMO: http://jsfiddle.net/9TyzP/

Code: 

element.on ('keypress', function (e) {
    console.log(String.fromCharCode(e.which));
})

Hinweis: Ich habe e.which von jQuery angegeben, da verschiedene Browser unterschiedliche Eigenschaften zum Speichern dieser Informationen verwenden. jQuery normalisiert die Eigenschaft .which, sodass Sie sie zuverlässig zum Abrufen des Schlüsselcodes verwenden können.

Problemumgehung für keydown

Sie können jedoch eine einfache Problemumgehung schreiben, um das gedrückte Zeichen für keydown zum Laufen zu bringen. Die Problemumgehung besteht darin, ein Objekt mit der Taste als charCode ohne Umschalttastendruck zu erstellen und den Wert mit der Umschalttaste.

Hinweis: Wie @ Sajjan Sarkar hervorhob, gibt es einige Unterschiede im Wert für e.which keycode, der von einem anderen Browser zurückgegeben wird. Lesen Sie hier mehr

Der DEMO-Code wurde aktualisiert, um den browserübergreifenden keyCode-Wert zu normalisieren. Getestet und verifiziert in IE 8, FF und Chrome.

Vollständiger Code unten und aktualisierte DEMO: http://jsfiddle.net/S2dyB/17/

$(function() {

    var _to_ascii = {
        '188': '44',
        '109': '45',
        '190': '46',
        '191': '47',
        '192': '96',
        '220': '92',
        '222': '39',
        '221': '93',
        '219': '91',
        '173': '45',
        '187': '61', //IE Key codes
        '186': '59', //IE Key codes
        '189': '45'  //IE Key codes
    }

    var shiftUps = {
        "96": "~",
        "49": "!",
        "50": "@",
        "51": "#",
        "52": "$",
        "53": "%",
        "54": "^",
        "55": "&",
        "56": "*",
        "57": "(",
        "48": ")",
        "45": "_",
        "61": "+",
        "91": "{",
        "93": "}",
        "92": "|",
        "59": ":",
        "39": "\"",
        "44": "<",
        "46": ">",
        "47": "?"
    };

    $(element).on('keydown', function(e) {
        var c = e.which;

        //normalize keyCode 
        if (_to_ascii.hasOwnProperty(c)) {
            c = _to_ascii[c];
        }

        if (!e.shiftKey && (c >= 65 && c <= 90)) {
            c = String.fromCharCode(c + 32);
        } else if (e.shiftKey && shiftUps.hasOwnProperty(c)) {
            //get shifted keyCode value
            c = shiftUps[c];
        } else {
            c = String.fromCharCode(c);
        }

        //$(element).val(c);
    }).on('keypress', function(e) {
        //$(element).val(String.fromCharCode(e.which));
    });    
});

Weitere Informationen zu Tastaturereignissen -

Die Ereignisse keydown, keypress und keyup werden ausgelöst, wenn der Benutzer eine Taste drückt.

Tastendruck Wird ausgelöst, wenn der Benutzer eine Taste drückt. Dies wiederholt sich, während der Benutzer die Taste gedrückt hält.

Tastendruck Wird ausgelöst, wenn ein tatsächliches Zeichen beispielsweise in eine Texteingabe eingefügt wird. Dies wiederholt sich, während der Benutzer die Taste gedrückt hält.

keyup Wird ausgelöst, wenn der Benutzer eine Taste loslässt, nachdem die Standardaktion dieser Taste ausgeführt wurde.

Beim ersten Drücken einer Taste wird das Ereignis keydown gesendet. Wenn der Schlüssel kein Zusatzschlüssel ist, wird das Ereignis keypress gesendet. Wenn der Benutzer den Schlüssel freigibt, wird das Ereignis keyup gesendet.

Wenn eine Taste gedrückt und gedrückt gehalten wird, beginnt die automatische Wiederholung. Daraufhin wird eine Abfolge von Ereignissen ausgelöst, die der folgenden ähnelt:

keydown
keypress
keydown
keypress
<<repeating until the user releases the key>>
keyup

DEMO: http://jsfiddle.net/9TyzP/1/

Keyup, Keydown vs Tastendruck

Die Ereignisse keydown und keyup repräsentieren das Drücken oder Loslassen von Tasten, während das Ereignis keypress ein eingegebenes Zeichen repräsentiert.

DEMO: http://jsfiddle.net/9TyzP/

Referenzen:

  1. https://developer.mozilla.org/en-US/docs/DOM/KeyboardEvent

  2. http://www.quirksmode.org/dom/events/keys.html

  3. http://unixpapa.com/js/key.html

104
Selvakumar Arumugam

Die Antwort von Selvakumar Arumugam wirkt für mich wie ein Zauber ... bis ich den Numpad teste. Also ein kleines Update hier: 

 $(document).on('keydown', function(e) {
    var c = e.which;

    if (_to_ascii.hasOwnProperty(c)) {
        c = _to_ascii[c];
    }

    if (!e.shiftKey && (c >= 65 && c <= 90)) {
        c = String.fromCharCode(c + 32);
    } else if (e.shiftKey && shiftUps.hasOwnProperty(c)) {
        c = shiftUps[c];
    } else if (96 <= c && c <= 105) {
        c = String.fromCharCode(c - 48);
    }else {
        c = String.fromCharCode(c);
    }

    $kd.val(c);
})

http://jsfiddle.net/S2dyB/78/

1
rexwolf

Ich mach das Es wird den Tastendruck einfach ignorieren, wenn der Wert keine Zahl ist. Es scheint ohne Probleme zu funktionieren ...

    $("input").on("keypress", function(e) {
        if(!jQuery.isNumeric(String.fromCharCode(e.which)))
            return false;
    });
1
Christoffer

Ich habe die obige Javascript-Klasse zum Konvertieren von gr in en-Zeichen erstellt und verwende sie. Es kann für mehrere Sprachen verwendet werden. Es verwendet JQuery, um den vom Benutzer gedrückten Wert zu ändern.

var CharMapper = function (selector) {
    this.getLanguageMapper = function (languageSource, languageTarget) {
        // Check if the map is already defined.
        if (typeof langugageCharMap === "undefined") {
            langugageCharMap = {};
        }
        if (typeof langugageCharMap[languageSource] === "undefined") {
            langugageCharMap[languageSource] = {};
        }

        // Initialize or get the language mapper.
        if (typeof langugageCharMap[languageSource][languageTarget] === "undefined") {
            switch (languageSource) {
                case "GR":
                    switch (languageTarget) {
                        case "EN":
                            langugageCharMap[languageSource][languageTarget] = {
                                "α": "a", "ά": "a", "β": "b", "γ": "g", "δ": "d", "ε": "e", "έ": "e", "ζ": "z", "η": "h", "ή": "h", "θ": "th", "ι": "i", "ί": "i", "ϊ": "i", "ΐ": "i", "κ": "k", "λ": "l", "μ": "m", "ν": "n", "ξ": "ks", "ο": "o", "ό": "o", "π": "p", "ρ": "r", "σ": "s", "ς": "s", "τ": "t", "υ": "y", "ύ": "y", "ϋ": "y", "ΰ": "y", "φ": "f", "χ": "x", "ψ": "ps", "ω": "o", "ώ": "o", "Α": "A", "Ά": "A", "Β": "B", "Γ": "G", "Δ": "D", "Ε": "E", "Έ": "E", "Ζ": "Z", "Η": "H", "Ή": "H", "Θ": "TH", "Ι": "I", "Ί": "I", "Ϊ": "I", "Κ": "K", "Λ": "L", "Μ": "M", "Ν": "N", "Ξ": "KS", "Ο": "O", "Ό": "O", "Π": "P", "Ρ": "R", "Σ": "S", "Τ": "T", "Υ": "Y", "Ύ": "Y", "Ϋ": "Y", "Φ": "F", "Χ": "X", "Ψ": "PS", "Ω": "O", "Ώ": "O"
                            };
                            break;
                        case "GR":
                        default:
                            throw "Language(" + languageTarget + ") is not supported as target for Language(" + languageSource + ").";
                    }
                    break;
                case "EN":
                default:
                    throw "Language(" + languageSource + ") is not supported as source.";
            }
        }

        return langugageCharMap[languageSource][languageTarget];
    };
    // Check the existance of the attribute.
    var items = $(selector).find("*[data-mapkey]");
    if (items.length === 0) {
        return;
    }

    // For each item.
    for (var i = 0; i < items.length; i++) {
        var item = items[i];

        // Get the source and target language.
        var languages = $(item).attr("data-mapkey");
        var languageSource = languages.split("_")[0];
        var languageTarget = languages.split("_")[1];

        // Add the event listener.
        var self = this;
        $(item).keypress(function (event) {
            event.stopPropagation();
            // Get the mapper to use.
            var mapper = self.getLanguageMapper(languageSource, languageTarget);
            // Get the key pressed.
            var keyPressed = String.fromCharCode(event.which);
            // Get the key to set. In case it doesn't exist in the mapper, get the key pressed.
            var keyToSet = mapper[keyPressed] || keyPressed;
            // Set the key to the dom.
            this.value = this.value + keyToSet;

            // Do not propagate.
            return false;
        });
    }
};

Beispiel,

<input type="text" data-mapkey="GR_EN" />
<script type="text/javascript">
    new CharMapper("body");
</script>
0
George Siggouroglou