كيف يمكنني التعامل مع Arrowkeys و <(أكبر من) في وظيفة JavaScript؟ أي حدث وأي رمز (charcode أو keycode)؟

StackOverflow https://stackoverflow.com/questions/3181648

سؤال

كيف يمكنني التعامل مع arrowkeys و < (أكبر من) في وظيفة جافا سكريبت؟ أي حدث وأي رمز (charcode أو keycode)؟

أنا في حيرة من أمري كيفية القيام بذلك. لقد قرأت هذا الرابط بعناية فائقة ،الأحداث ورمز المفاتيح+charcode, ، لكنني لم أجد أي حل لسيناريو.

هل كانت مفيدة؟

المحلول

استخدام event.keyCode كافي. تحتاج فقط إلى مشكلات توافق المتصفح فيما يتعلق بالحصول على الحدث الرئيسي في الاعتبار.

إليك مثال انطلاق أساسي يلتقط مفاتيح الأسهم ، ونسخه ،

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3181648</title>
        <script>
            document.onkeydown = function(e) {
                e = e || event; // "real browsers" || IE6/7.
                switch (e.keyCode) {
                    case 37: alert('left'); break;
                    case 38: alert('up'); break;
                    case 39: alert('right'); break;
                    case 40: alert('down'); break;
                }
            }
        </script>
    </head>
    <body>
       <p>Press one of the arrow keys.</p> 
    </body>
</html>

لاحظ أن إرفاق الأحداث من الأفضل القيام به هذه الطريق أو باستخدام jQuery.

لالتقاط الشخصيات المضغوطة مثل <, ، القي نظرة على إجابة تيم.

نصائح أخرى

عند الكشف keydown الحدث هو النهج الصحيح. للكشف عن شخصية مكتوبة مثل <, ، باستخدام keypress الحدث هو النهج الآمن الوحيد. إذا استخدمت بدلاً من ذلك keydown الحدث و keyCode الخاصية ، هذا غير مضمون للعمل على أنواع لوحة المفاتيح والمتصفحات المختلفة عنك.

إذا كنت تريد حقًا التعرف على معالجة مفاتيح JavaScript ، أوصي بالصفحة التالية: http://unixpapa.com/js/key.html

إليك مثال على متطلباتك:

document.onkeydown = function(evt) {
    evt = evt || window.event;
    switch (evt.keyCode) {
        case 37: alert("left"); break;
        case 38: alert("up"); break;
        case 39: alert("right"); break;
        case 40: alert("down"); break;
    }
};

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.which || evt.keyCode;
    var charStr = String.fromCharCode(charCode);
    if (charStr == "<") {
        alert("<");
    }
};

<script type="text/javascript">
var Keys = {
      BACKSPACE: 8,  TAB: 9,        ENTER: 13,     SHIFT: 16,
      CTRL: 17,      ALT: 18,       PAUSE: 19,     CAPS: 20,
      ESC: 27,       PAGEUP: 33,    PAGEDN: 34,    END: 35,
      HOME: 36,      LEFT: 37,      UP: 38,        RIGHT: 39,
      DOWN: 40,      INSERT: 45,    DELETE: 46,       
      n0: 48, n1: 49, n2: 50, n3: 51, n4: 52,
      n5: 53, n6: 54, n7: 55, n8: 56, n9: 57,
      A:65, B:66, C:67, D:68, E:68, F:70, G:71, H:72, I:73, J:74, K:75,
      L:76, M:77, N:78, O:79, P:80, Q:81, R:82, S:83, T:84, U:85, V:86,
      W:87, X:88, Y:89, Z:90,
      WINLEFT: 91,   WINRIGHT: 92,  SELECT: 93,    NUM0: 96,
      NUM1: 97,      NUM2: 98,      NUM3: 99,      NUM4: 100,
      NUM5: 101,     NUM6: 102,     NUM7: 103,     NUM8: 104,
      NUM9: 105,     MULTIPLY: 106, ADD: 107,      SUBTRACT: 109,
      DECIMAL: 110,  DIVIDE: 111,   F1: 112,       F2: 113,
      F3: 114,       F4: 115,       F5: 116,       F6: 117,
      F7: 118,       F8: 119,       F9: 120,       F10: 121,
      F11: 122,      F12: 123,      NUMLOCK: 144,  SCROLLLOCK: 145,
      SEMICOLON: 186,EQUAL: 187,    COMMA: 188,    DASH: 189,
      PERIOD: 190,   FORWARDSLASH: 191,            GRAVEACCENT: 192,
      OPENBRACKET: 219,             BACKSLASH: 220,
      CLOSEBRACKET: 221,            QUOTE: 222
};

/* true - will be handled also by default handler and for false - will not (if you wanna disable some keys) */
function pressedKeyHandler(key){
     if (k != Keys.COMMA || k != Keys.DASH) return true;
     //handle pressed button here         
     return true; 
}

if (typeof window.event != 'undefined') // IE
  document.onkeydown = function() { return pressedKeyHandler(event.keyCode); }
else   // FireFox/Opera/Others 
  document.onkeypress = function(e) { return pressedKeyHandler(e.keyCode); }

</script>

قد أكون مخطئًا ولكن يبدو أنه من الأفضل أن تتعامل مع حدث OnKeydown بدلاً من Onkeypress.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top