JavaScript：如果仅用于第一个语句？

时间：2015-05-15 21:07:28

标签： javascript if-statement

好的问题是只有SHIFT键正常工作???它是列表中的第一个IF因此由于某种原因它不会去其他的？请帮助:)

更新：有人建议它是＆＃34;否则如果＆＃34;造成这个问题。我已经尝试过了另一种方式。我已经尝试过 各种方式 我能想到的。请发布一个有效的例子。感谢。

另外......如果有人能告诉我为什么关键代码不显示会很棒：）

KeypressCapture.js 

//START Screen_Keypress_Capture
function Screen_Keypress_Capture () {
    document.onkeydown = KeyDown_Handler;
    document.onkeyup = KeyUp_Handler;
    var CTRL_Key = false;         
    var SHIFT_Key = false;        
    var ALT_Key = false;
    var JavaScript_Key_Code = -1;

function KeyDown_Handler(ThisEvent) { // (e) is short for event: You can use any name you like (ThisEvent)
                                        // It's a way of passing the same event from one function to another
                                        // START Key-Down Handler
    var Key_Pressed = '';
    if (document.all)
    {
        var Window_Event = window.event;
        Key_Pressed =  Window_Event.keyCode;
    }
    else
    {
        Key_Pressed = ThisEvent.keyCode;
    }
    Detect_Keys_Pressed(Key_Pressed, true);
    Show_Keys_Pressed();
}// END Key-Down Handler

function KeyUp_Handler(ThisEvent) { // START Key-Up Handler
    var Key_Pressed = '';
    if (document.all)
    {
        var Window_Event = window.event;
        Key_Pressed = Window_Event.keyCode;
    }
    else
    {
        Key_Pressed = ThisEvent.keyCode;
    }
    Detect_Keys_Pressed(Key_Pressed, false);
    Show_Keys_Pressed();
}// END Key-Up Handler

function Detect_Keys_Pressed(Key_Pressed, Is_Key_Still_Down) { // START Detect Which Key Is Pressed
    if (Key_Pressed == '16')
    {
        SHIFT_Key = Is_Key_Still_Down;
    }
    else if (Key_Pressed == '17')
    {
        CTRL_Key = Is_Key_Still_Down;
    }
    else if (Key_Pressed == '18')
    {
        ALT_Key = Is_Key_Still_Down;
    }
    else
    {
        if(Is_Key_Still_Down)
            JavaScript_Key_Code = Key_Pressed;
        else
            JavaScript_Key_Code = -1;
    }   
}// END Detect Which Key Is Pressed

function Show_Keys_Pressed() { // START Show Results IN DIV's
// Example to move a div
// var dest = document.getElementById("my_div");
// var orig = document.getElementById("ad_div");
// orig.parentNode.removeChild(orig);
// dest.appendChild(orig);
    var Show_Current_Keys_Pressed = document.getElementById('Show_Current_Keys_Pressed');
    var DIV_Shift = document.getElementById('DIV_Shift');
    var DIV_Ctrl = document.getElementById('DIV_Ctrl');
    var DIV_Alt = document.getElementById('DIV_Alt');
    var DIV_Char = document.getElementById('DIV_Char');

    if(SHIFT_Key == true){
        DIV_Shift.parentNode.removeChild(DIV_Shift);
        Show_Current_Keys_Pressed.appendChild(DIV_Shift);
        DIV_Shift.style.visibility = "visible";
    }

    else if(SHIFT_Key == false){
        DIV_Shift.style.visibility = "hidden";
        Show_Current_Keys_Pressed.parentNode.removeChild(DIV_Shift);
        body.appendChild(DIV_Shift);    
    }

    else if(CTRL_Key == true){
        DIV_Ctrl.parentNode.removeChild(DIV_Ctrl);
        Show_Current_Keys_Pressed.appendChild(DIV_Ctrl);
        DIV_Ctrl.style.visibility = "visible";
    }

    else if(CTRL_Key == false){
        DIV_Ctrl.style.visibility = "hidden";
        Show_Current_Keys_Pressed.parentNode.removeChild(DIV_Ctrl);
        body.appendChild(DIVCtrl);
    }

    else if(ALT_Key == true){
        DIV_Alt.parentNode.removeChild(DIV_Alt);
        Show_Current_Keys_Pressed.appendChild(DIV_Alt);
        DIV_Alt.style.visibility = "visible";
    }

    else if(CTRL_Key == false){
        DIV_Alt.style.visibility = "hidden";
        Show_Current_Keys_Pressed.parentNode.removeChild(DIV_Alt);
        body.appendChild(DIV_Alt);
    }

    else if(JavaScript_Key_Code == true){
        DIV_Char.parentNode.removeChild(DIV_Char);
        Show_Current_Keys_Pressed.appendChild(DIV_Char);
        DIV_Char.innerHTML = JavaScript_Key_Code;   
        DIV_Char.style.visibility = "visible";
    }

    else if(JavaScript_Key_Code == false){
        DIV_Char.style.visibility = "hidden";
        DIV_Char.innerHTML = JavaScript_Key_Code;   
        Show_Current_Keys_Pressed.parentNode.removeChild(DIV_Char);
        body.appendChild(DIV_Char);
    }

    else{}

}// END Show Results IN DIV's

}
// END Screen_Keypress_Capture

KeypressCapture.css

包括CSS：href =＆＃34; KeypressCapture.css＆＃34;的rel =＆＃34;样式表＆＃34;类型=＆＃34;文本/ CSS＆＃34;

包含JavaScript：src =＆＃34; KeypressCapture.js＆＃34; 

    #Show_Current_Keys_Pressed {
    width: 400px;
    height: 21px;
    padding: 20px 20px 20px 30px; /* UP RIGHT DOWN LEFT */
    margin: 40px;
    border: 1px solid #999;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit--moz-border-radius:4px;
    background-color: #fff;
    clear: both;
    float: left;
}

#Show_Current_Combo {
    width: 400px;
    height: 21px;
    padding: 20px 20px 20px 30px; /* UP RIGHT DOWN LEFT */
    margin: 40px;
    margin-top: 0px;
    border: 1px solid #999;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit--moz-border-radius:4px;
    background-color: #FCFFA8;
    clear: both;
    float: left;
}

#Show_Created_String {
    width: 400px;
    height: 21px;
    padding: 20px 20px 20px 30px; /* UP RIGHT DOWN LEFT */
    margin: 40px;
    margin-top: 0px;
    border: 1px solid #999;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit--moz-border-radius:4px;
    background-color: #FFE2C6;
    clear: both;
    float: left;
}

#DIV_Shift {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: red;
    visibility: hidden;
    float: left;
}

#DIV_Ctrl {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: green; 
    visibility: hidden;
    float: left;
}

#DIV_Alt {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: blue; 
    visibility: hidden;
    float: left;
}

#DIV_Char {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: black; 
    visibility: hidden;
    float: left;

}

.STYLE_Shift {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: red; 
    visibility: hidden;
    float: left;
}

.STYLE_Ctrl {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: green; 
    visibility: hidden;
    float: left;
}

.STYLE_Alt {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: blue; 
    visibility: hidden;
    float: left;
}

.STYLE_Char {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: black; 
    visibility: hidden;
    float: left;
}

KeypressCapture..html 

<div id="Show_Current_Keys_Pressed">
</div>

<div id="Show_Current_Combo">
</div>

<div id="Show_Created_String">
</div>


<div id="DIV_Shift">
SHIFT
</div>

<div id="DIV_Ctrl">
CTRL
</div>

<div id="DIV_Alt">
ALT
</div>

<div id="DIV_Char">
</div>

更新：即使您使用以下代码，它仍然只运行列表中的第一个，即＆＃34; SHIFT＆＃34;钥匙，跳过其他人。

        if(SHIFT_Key){
            DIV_Shift.parentNode.removeChild(DIV_Shift);
            Show_Current_Keys_Pressed.appendChild(DIV_Shift);
            DIV_Shift.style.visibility = "visible";
        }else{          
            DIV_Shift.style.visibility = "hidden";
            Show_Current_Keys_Pressed.parentNode.removeChild(DIV_Shift);
            body.appendChild(DIV_Shift);            
        }

        if(CTRL_Key){
            DIV_Ctrl.parentNode.removeChild(DIV_Ctrl);
            Show_Current_Keys_Pressed.appendChild(DIV_Ctrl);
            DIV_Ctrl.style.visibility = "visible";
        }else{ 
            DIV_Ctrl.style.visibility = "hidden";
            Show_Current_Keys_Pressed.parentNode.removeChild(DIV_Ctrl);
            body.appendChild(DIVCtrl);
        }

        if(ALT_Key){
            DIV_Alt.parentNode.removeChild(DIV_Alt);
            Show_Current_Keys_Pressed.appendChild(DIV_Alt);
            DIV_Alt.style.visibility = "visible";
        }else{ 
            DIV_Alt.style.visibility = "hidden";
            Show_Current_Keys_Pressed.parentNode.removeChild(DIV_Alt);
            body.appendChild(DIV_Alt);
        }

        if(JavaScript_Key_Code){
            DIV_Char.parentNode.removeChild(DIV_Char);
            Show_Current_Keys_Pressed.appendChild(DIV_Char);
            DIV_Char.innerHTML = JavaScript_Key_Code;   
            DIV_Char.style.visibility = "visible";
        }else{ 
            DIV_Char.style.visibility = "hidden";
            DIV_Char.innerHTML = JavaScript_Key_Code;   
            Show_Current_Keys_Pressed.parentNode.removeChild(DIV_Char);
            body.appendChild(DIV_Char);
        }

4 个答案:

答案 0 :(得分：1)

问题在于您使用else if。如果前面的所有块都为假，它只执行该块。但是你的代码看起来像这样：

if(SHIFT_Key == true){
    ...
}
else if(SHIFT_Key == false){
    ...  
}
else if(CTRL_Key == true){
    ...
}

如果第一个if失败，则第二个保证成功（SHIFT_Key为true或false）。因此，永远不会使用下一个else。

您应该单独测试每个密钥，而不是else if。

下一个问题：JavaScript_Key_Code不是真/假;当没有按下按键时它被设置为-1，或者当按键被按下时被设置为按键代码。因此，您应该将其与-1进行比较。

下一个问题：您的body.appendChild(DIV_Shift);条款中有else，但没有变量body，它是document.body。

下一个问题：您有一个拼写错误，DIVCtrl应为DIV_Ctrl。

下一个问题：您的每个else块都会执行Show_Current_Keys_Pressed.parentNode.removeChild(DIV_Shift);之类的操作。但是在第一次按下不同的键之后，这个DIV不再是该父节点的子节点，而是重新定位到正文。此错误导致该功能停止。在移动之前，您需要测试它当前是否在该节点中。

＆＃13;
＆＃13; 
//START Screen_Keypress_Capture
function Screen_Keypress_Capture() {
    document.onkeydown = KeyDown_Handler;
    document.onkeyup = KeyUp_Handler;
    var CTRL_Key = false;
    var SHIFT_Key = false;
    var ALT_Key = false;
    var JavaScript_Key_Code = -1;

    function KeyDown_Handler(ThisEvent) { // (e) is short for event: You can use any name you like (ThisEvent)
        // It's a way of passing the same event from one function to another
        // START Key-Down Handler
        var Key_Pressed = '';
        if (document.all) {
            var Window_Event = window.event;
            Key_Pressed = Window_Event.keyCode;
        } else {
            Key_Pressed = ThisEvent.keyCode;
        }
        Detect_Keys_Pressed(Key_Pressed, true);
        Show_Keys_Pressed();
    } // END Key-Down Handler

    function KeyUp_Handler(ThisEvent) { // START Key-Up Handler
        var Key_Pressed = '';
        if (document.all) {
            var Window_Event = window.event;
            Key_Pressed = Window_Event.keyCode;
        } else {
            Key_Pressed = ThisEvent.keyCode;
        }
        Detect_Keys_Pressed(Key_Pressed, false);
        Show_Keys_Pressed();
    } // END Key-Up Handler

    function Detect_Keys_Pressed(Key_Pressed, Is_Key_Still_Down) { // START Detect Which Key Is Pressed
        if (Key_Pressed == '16') {
            SHIFT_Key = Is_Key_Still_Down;
        } else if (Key_Pressed == '17') {
            CTRL_Key = Is_Key_Still_Down;
        } else if (Key_Pressed == '18') {
            ALT_Key = Is_Key_Still_Down;
        } else {
            if (Is_Key_Still_Down) JavaScript_Key_Code = Key_Pressed;
            else JavaScript_Key_Code = -1;
        }
    } // END Detect Which Key Is Pressed

    function Show_Keys_Pressed() { // START Show Results IN DIV's
        // Example to move a div
        // var dest = document.getElementById("my_div");
        // var orig = document.getElementById("ad_div");
        // orig.parentNode.removeChild(orig);
        // dest.appendChild(orig);
        var Show_Current_Keys_Pressed = document.getElementById('Show_Current_Keys_Pressed');
        var DIV_Shift = document.getElementById('DIV_Shift');
        var DIV_Ctrl = document.getElementById('DIV_Ctrl');
        var DIV_Alt = document.getElementById('DIV_Alt');
        var DIV_Char = document.getElementById('DIV_Char');
        var body = document.body;

        if (SHIFT_Key == true) {
            DIV_Shift.parentNode.removeChild(DIV_Shift);
            Show_Current_Keys_Pressed.appendChild(DIV_Shift);
            DIV_Shift.style.visibility = "visible";
        } else {
            if (DIV_Shift.parentNode != body) {
                DIV_Shift.style.visibility = "hidden";
                Show_Current_Keys_Pressed.parentNode.removeChild(DIV_Shift);
                body.appendChild(DIV_Shift);
            }
        }

        if (CTRL_Key == true) {
            DIV_Ctrl.parentNode.removeChild(DIV_Ctrl);
            Show_Current_Keys_Pressed.appendChild(DIV_Ctrl);
            DIV_Ctrl.style.visibility = "visible";
        } else {
            if (DIV_Ctrl.parentNode != body) {
                DIV_Ctrl.style.visibility = "hidden";
                Show_Current_Keys_Pressed.parentNode.removeChild(DIV_Ctrl);
                body.appendChild(DIV_Ctrl);
            }
        }

        if (ALT_Key == true) {
            DIV_Alt.parentNode.removeChild(DIV_Alt);
            Show_Current_Keys_Pressed.appendChild(DIV_Alt);
            DIV_Alt.style.visibility = "visible";
        } else {
            if (DIV_Alt.parentNode != body) {
                DIV_Alt.style.visibility = "hidden";
                Show_Current_Keys_Pressed.parentNode.removeChild(DIV_Alt);
                body.appendChild(DIV_Alt);
            }
        }

        if (JavaScript_Key_Code != -1) {
            DIV_Char.parentNode.removeChild(DIV_Char);
            Show_Current_Keys_Pressed.appendChild(DIV_Char);
            DIV_Char.innerHTML = JavaScript_Key_Code;
            DIV_Char.style.visibility = "visible";
        } else {
            if (DIV_Char.parentNode != body) {
                DIV_Char.style.visibility = "hidden";
                DIV_Char.innerHTML = JavaScript_Key_Code;
                Show_Current_Keys_Pressed.parentNode.removeChild(DIV_Char);
            }
            body.appendChild(DIV_Char);
        }

    } // END Show Results IN DIV's

}
// END Screen_Keypress_Capture
Screen_Keypress_Capture();
＆＃13; 
#Show_Current_Keys_Pressed {
    width: 400px;
    height: 21px;
    padding: 20px 20px 20px 30px;
    /* UP RIGHT DOWN LEFT */
    margin: 40px;
    border: 1px solid #999;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit--moz-border-radius:4px;
    background-color: #fff;
    clear: both;
    float: left;
}
#Show_Current_Combo {
    width: 400px;
    height: 21px;
    padding: 20px 20px 20px 30px;
    /* UP RIGHT DOWN LEFT */
    margin: 40px;
    margin-top: 0px;
    border: 1px solid #999;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit--moz-border-radius:4px;
    background-color: #FCFFA8;
    clear: both;
    float: left;
}
#Show_Created_String {
    width: 400px;
    height: 21px;
    padding: 20px 20px 20px 30px;
    /* UP RIGHT DOWN LEFT */
    margin: 40px;
    margin-top: 0px;
    border: 1px solid #999;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit--moz-border-radius:4px;
    background-color: #FFE2C6;
    clear: both;
    float: left;
}
#DIV_Shift {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: red;
    visibility: hidden;
    float: left;
}
#DIV_Ctrl {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: green;
    visibility: hidden;
    float: left;
}
#DIV_Alt {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: blue;
    visibility: hidden;
    float: left;
}
#DIV_Char {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: black;
    visibility: hidden;
    float: left;
}
.STYLE_Shift {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: red;
    visibility: hidden;
    float: left;
}
.STYLE_Ctrl {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: green;
    visibility: hidden;
    float: left;
}
.STYLE_Alt {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: blue;
    visibility: hidden;
    float: left;
}
.STYLE_Char {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: black;
    visibility: hidden;
    float: left;
}
＆＃13; 
<div id="Show_Current_Keys_Pressed"></div>
<div id="Show_Current_Combo"></div>
<div id="Show_Created_String"></div>
<div id="DIV_Shift">SHIFT</div>
<div id="DIV_Ctrl">CTRL</div>
<div id="DIV_Alt">ALT</div>
<div id="DIV_Char"></div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我个人使用这个。它简单而强大。

// The keys.
var KEYS = { BACKSPACE: 8, TAB: 9, ENTER: 13, SHIFT: 16, CTRL: 17, ALT: 18, PAUSE: 19, CAPS_LOCK: 20, ESCAPE: 27, SPACE: 32, PAGE_UP: 33, PAGE_DOWN: 34, END: 35, HOME: 36, LEFT_ARROW: 37, UP_ARROW: 38, RIGHT_ARROW: 39, DOWN_ARROW: 40, INSERT: 45, DELETE: 46, KEY_0: 48, KEY_1: 49, KEY_2: 50, KEY_3: 51, KEY_4: 52, KEY_5: 53, KEY_6: 54, KEY_7: 55, KEY_8: 56, KEY_9: 57, KEY_A: 65, KEY_B: 66, KEY_C: 67, KEY_D: 68, KEY_E: 69, KEY_F: 70, KEY_G: 71, KEY_H: 72, KEY_I: 73, KEY_J: 74, KEY_K: 75, KEY_L: 76, KEY_M: 77, KEY_N: 78, KEY_O: 79, KEY_P: 80, KEY_Q: 81, KEY_R: 82, KEY_S: 83, KEY_T: 84, KEY_U: 85, KEY_V: 86, KEY_W: 87, KEY_X: 88, KEY_Y: 89, KEY_Z: 90, LEFT_META: 91, RIGHT_META: 92, SELECT: 93, NUMPAD_0: 96, NUMPAD_1: 97, NUMPAD_2: 98, NUMPAD_3: 99, NUMPAD_4: 100, NUMPAD_5: 101, NUMPAD_6: 102, NUMPAD_7: 103, NUMPAD_8: 104, NUMPAD_9: 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, NUM_LOCK: 144, SCROLL_LOCK: 145, SEMICOLON: 186, EQUALS: 187, COMMA: 188, DASH: 189, PERIOD: 190, FORWARD_SLASH: 191, GRAVE_ACCENT: 192, OPEN_BRACKET: 219, BACK_SLASH: 220, CLOSE_BRACKET: 221, SINGLE_QUOTE: 222 };
// Array to track which keys are currently pressed.
var keyDown = [];

// Keyboard state.
document.addEventListener("keydown", function (event) {
    keyDown[event.which] = true;
});

document.addEventListener("keyup", function (event) {
    keyDown[event.which] = false;
});


// You can now just check if say keyDown[KEYS.BACKSPACE] == true
function logger() {
    var keysPressed = [];

    for (var key in KEYS) {
        if (keyDown[KEYS[key]]) keysPressed.push(key);
    }

    document.body.textContent = keysPressed.length ? keysPressed.join(", ") : "Press keys";
}

window.setInterval(logger, 1000);

答案 2 :(得分：0)

我很遗憾地说，但你的做法是错误的。有很多关于处理关键事件的优秀教程out there。通常，为ctrl和alt等修饰键捕获单个事件并不是100％可靠。最好检测组合，例如ctrl + t。

使用事件通常更好：

var keys = [];
document.addEventListener('keydown', function (evt) {
    keys[evt.keyCode] = true;

    // Ctrl + Shift + 5
    if (keys[17] && keys[16] && keys[53]) {
        // do something
    }
});

document.addEventListener('keyup', function (evt) {
    keys[evt.keyCode] = false;
});

这也使您的代码更加通用，无需检查每个特定的密钥来设置其状态。

键事件还包含修饰键的开关：shiftKey，ctrlKey，altKey，metaKey。例如：

document.addEventListener('keydown', function (evt) {
    console.log(evt.ctrlKey);
});

这些开关指示在触发事件时是否按下每个修改键。这就是您通常检测组合的方式。

正如其他人所说，你的代码看起来很陈旧。忘记document.all。只需从事件中获取keyCode即可。 Internet Explorer 4尚未出现for 15 years。

请注意，keyCodes是数字，而不是字符串。阅读上面的教程时，请注意keyCode，charCode和哪个。

之间的区别

修改：回答以下一些问题

传递给addEventListener的侦听器函数在触发时始终会收到一个参数 - 事件。您可以根据需要为函数的参数命名，但无论如何，此对象都将成为事件：

function handleClick (e)
{
    // this function will receive the event
    // the function is only called when the document is clicked
    console.log(e);
    console.log(e.target);
}

document.addEventListener('click', handleClick);

此事件包含一系列有用的内容，您可以在事件触发时检查 - 事件触发的目标，一些额外信息，具体取决于特定事件。对于键盘事件，此事件封装了浏览器在给定时刻收集的关于键盘状态的任何内容（例如，按住ctrl或alt？is capslock on等等。）

网上有很多优秀的资源，但另一个重要的事情是练习，练习，练习。如果你在这里问问题，你显然在做什么：）

我通常会参考MDN获取文档和教程。 Quirksmode很不错。

还可以推荐阅读各种项目的源代码 - 这可以提供对所使用模式的大量了解。有些O'Reilly books也可能会有所帮助。

关于编程和设计模式的一般性阅读。

答案 3 :(得分：0)

你有一个真正的黑客。您的代码中有一些例外，这就是它只运行到SHIFT部分的原因。

尝试这样的事情毫无例外，对于前两个键，仍然很难看：

if (SHIFT_Key) {
  DIV_Shift.parentNode.removeChild(DIV_Shift);
  Show_Current_Keys_Pressed.appendChild(DIV_Shift);
} else if (DIV_Shift.style.visibility == "visible") {
  Show_Current_Keys_Pressed.removeChild(DIV_Shift);
  Show_Current_Keys_Pressed.parentNode.appendChild(DIV_Shift);
}
DIV_Shift.style.visibility = SHIFT_Key ? "visible" : "hidden";

if (CTRL_Key) {
  DIV_Ctrl.parentNode.removeChild(DIV_Ctrl);
  Show_Current_Keys_Pressed.appendChild(DIV_Ctrl);
} else if (DIV_Ctrl.style.visibility == "visible") {
  Show_Current_Keys_Pressed.removeChild(DIV_Ctrl);
  Show_Current_Keys_Pressed.parentNode.appendChild(DIV_Ctrl);
}
DIV_Ctrl.style.visibility = CTRL_Key ? "visible" : "hidden";

以下是完整版： 

<!doctype html>
<html>
<head>
    <style>
        #Show_Current_Keys_Pressed {
    width: 400px;
    height: 21px;
    padding: 20px 20px 20px 30px; /* UP RIGHT DOWN LEFT */
    margin: 40px;
    border: 1px solid #999;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit--moz-border-radius:4px;
    background-color: #fff;
    clear: both;
    float: left;
}

#Show_Current_Combo {
    width: 400px;
    height: 21px;
    padding: 20px 20px 20px 30px; /* UP RIGHT DOWN LEFT */
    margin: 40px;
    margin-top: 0px;
    border: 1px solid #999;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit--moz-border-radius:4px;
    background-color: #FCFFA8;
    clear: both;
    float: left;
}

#Show_Created_String {
    width: 400px;
    height: 21px;
    padding: 20px 20px 20px 30px; /* UP RIGHT DOWN LEFT */
    margin: 40px;
    margin-top: 0px;
    border: 1px solid #999;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit--moz-border-radius:4px;
    background-color: #FFE2C6;
    clear: both;
    float: left;
}

#DIV_Shift {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: red;
    visibility: hidden;
    float: left;
}

#DIV_Ctrl {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: green; 
    visibility: hidden;
    float: left;
}

#DIV_Alt {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: blue; 
    visibility: hidden;
    float: left;
}

#DIV_Char {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: black; 
    visibility: hidden;
    float: left;

}

.STYLE_Shift {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: red; 
    visibility: hidden;
    float: left;
}

.STYLE_Ctrl {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: green; 
    visibility: hidden;
    float: left;
}

.STYLE_Alt {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: blue; 
    visibility: hidden;
    float: left;
}

.STYLE_Char {
    font: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: black; 
    visibility: hidden;
    float: left;
}
    </style>
</head>
<body>
    <div id="Show_Current_Keys_Pressed">
    </div>

    <div id="Show_Current_Combo">
    </div>

    <div id="Show_Created_String">
    </div>


    <div id="DIV_Shift">
        SHIFT
    </div>

    <div id="DIV_Ctrl">
        CTRL
    </div>

    <div id="DIV_Alt">
        ALT
    </div>

    <div id="DIV_Char">
    </div>

    <script type="text/javascript">
        //START Screen_Keypress_Capture
        function Screen_Keypress_Capture() {
            document.onkeydown = KeyDown_Handler;
            document.onkeyup = KeyUp_Handler;
            var CTRL_Key = false;
            var SHIFT_Key = false;
            var ALT_Key = false;
            var JavaScript_Key_Code = -1;

            function KeyDown_Handler(ThisEvent) { // (e) is short for event: You can use any name you like (ThisEvent)
                // It's a way of passing the same event from one function to another
                // START Key-Down Handler
                var Key_Pressed = '';
                if (document.all) {
                    var Window_Event = window.event;
                    Key_Pressed = Window_Event.keyCode;
                }
                else {
                    Key_Pressed = ThisEvent.keyCode;
                }
                Detect_Keys_Pressed(Key_Pressed, true);
                Show_Keys_Pressed();
            }// END Key-Down Handler

            function KeyUp_Handler(ThisEvent) { // START Key-Up Handler
                var Key_Pressed = '';
                if (document.all) {
                    var Window_Event = window.event;
                    Key_Pressed = Window_Event.keyCode;
                }
                else {
                    Key_Pressed = ThisEvent.keyCode;
                }
                Detect_Keys_Pressed(Key_Pressed, false);
                Show_Keys_Pressed();
            }// END Key-Up Handler

            function Detect_Keys_Pressed(Key_Pressed, Is_Key_Still_Down) { // START Detect Which Key Is Pressed
                if (Key_Pressed == '16') {
                    SHIFT_Key = Is_Key_Still_Down;
                }
                else if (Key_Pressed == '17') {
                    CTRL_Key = Is_Key_Still_Down;
                }
                else if (Key_Pressed == '18') {
                    ALT_Key = Is_Key_Still_Down;
                }
                else {
                    if (Is_Key_Still_Down)
                        JavaScript_Key_Code = Key_Pressed;
                    else
                        JavaScript_Key_Code = -1;
                }
            }// END Detect Which Key Is Pressed

            function Show_Keys_Pressed() { // START Show Results IN DIV's
                // Example to move a div
                // var dest = document.getElementById("my_div");
                // var orig = document.getElementById("ad_div");
                // orig.parentNode.removeChild(orig);
                // dest.appendChild(orig);
                var Show_Current_Keys_Pressed = document.getElementById('Show_Current_Keys_Pressed');
                var DIV_Shift = document.getElementById('DIV_Shift');
                var DIV_Ctrl = document.getElementById('DIV_Ctrl');
                var DIV_Alt = document.getElementById('DIV_Alt');
                var DIV_Char = document.getElementById('DIV_Char');

                if (SHIFT_Key) {
                    DIV_Shift.parentNode.removeChild(DIV_Shift);
                    Show_Current_Keys_Pressed.appendChild(DIV_Shift);
                } else if (DIV_Shift.style.visibility == "visible") {
                    Show_Current_Keys_Pressed.removeChild(DIV_Shift);
                    Show_Current_Keys_Pressed.parentNode.appendChild(DIV_Shift);
                }
                DIV_Shift.style.visibility = SHIFT_Key ? "visible" : "hidden";

                if (CTRL_Key) {
                    DIV_Ctrl.parentNode.removeChild(DIV_Ctrl);
                    Show_Current_Keys_Pressed.appendChild(DIV_Ctrl);
                } else if (DIV_Ctrl.style.visibility == "visible") {
                    Show_Current_Keys_Pressed.removeChild(DIV_Ctrl);
                    Show_Current_Keys_Pressed.parentNode.appendChild(DIV_Ctrl);
                }
                DIV_Ctrl.style.visibility = CTRL_Key ? "visible" : "hidden";

                if (ALT_Key) {
                    DIV_Alt.parentNode.removeChild(DIV_Alt);
                    Show_Current_Keys_Pressed.appendChild(DIV_Alt);
                } else if (DIV_Alt.style.visibility == "visible") {
                    Show_Current_Keys_Pressed.removeChild(DIV_Alt)
                    Show_Current_Keys_Pressed.parentNode.appendChild(DIV_Alt);
                }
                DIV_Alt.style.visibility = ALT_Key ? "visible" : "hidden";

                if (JavaScript_Key_Code) {
                    DIV_Char.parentNode.removeChild(DIV_Char);
                    Show_Current_Keys_Pressed.appendChild(DIV_Char);
                } else if (DIV_Char.style.visibility == "visible") {
                    Show_Current_Keys_Pressed.removeChild(DIV_Char)
                    Show_Current_Keys_Pressed.parentNode.appendChild(DIV_Char);
                }
                DIV_Char.innerHTML = JavaScript_Key_Code;
                DIV_Char.style.visibility = JavaScript_Key_Code > 0 ? "visible" : "hidden";

            }// END Show Results IN DIV's

        }
        // END Screen_Keypress_Capture
        Screen_Keypress_Capture();
    </script>
</body>
</html>

相关问题
最新问题