javascript键盘事件全面控制脚本代码_javascript技巧-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

javascript键盘事件全面控制脚本代码_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:04 PM

javascript事件脚本键盘

function showKeyDown(evt) { 
    evt = (evt) ? evt : window.event 
    document.getElementById("pressKeyCode").innerHTML = 0 
    document.getElementById("upKeyCode").innerHTML = 0 
    document.getElementById("pressCharCode").innerHTML = 0 
    document.getElementById("upCharCode").innerHTML = 0 
    restoreModifiers("") 
    restoreModifiers("Down") 
    restoreModifiers("Up") 
    document.getElementById("downKeyCode").innerHTML = evt.keyCode 
    if (evt.charCode) { 
        document.getElementById("downCharCode").innerHTML = evt.charCode 
    } 
    showModifiers("Down", evt) 
} 
function showKeyUp(evt) { 
    evt = (evt) ? evt : window.event 
    document.getElementById("upKeyCode").innerHTML = evt.keyCode 
    if (evt.charCode) { 
        document.getElementById("upCharCode").innerHTML = evt.charCode 
    } 
    showModifiers("Up", evt) 
    return false 
} 
function showKeyPress(evt) { 
    evt = (evt) ? evt : window.event 
    document.getElementById("pressKeyCode").innerHTML = evt.keyCode 
    if (evt.charCode) { 
        document.getElementById("pressCharCode").innerHTML = evt.charCode 
    } 
    showModifiers("", evt) 
    return false 
} 
function showModifiers(ext, evt) { 
    restoreModifiers(ext) 
    if (evt.shiftKey) { 
        document.getElementById("shift" + ext).style.backgroundColor = "#ff0000" 
    } 
    if (evt.ctrlKey) { 
        document.getElementById("ctrl" + ext).style.backgroundColor = "#00ff00" 
    } 
    if (evt.altKey) { 
        document.getElementById("alt" + ext).style.backgroundColor = "#0000ff" 
    } 
} 
function restoreModifiers(ext) { 
    document.getElementById("shift" + ext).style.backgroundColor = "#ffffff" 
    document.getElementById("ctrl" + ext).style.backgroundColor = "#ffffff" 
    document.getElementById("alt" + ext).style.backgroundColor = "#ffffff" 
} 
</script>

<h1 id="Keyboard-Event-Handler-Lab">Keyboard Event Handler Lab</h1> 
<hr> 
<form> 
<table border="2" cellpadding="2"> 
<tr>
<th></th>
<th>onKeyDown</th>
<th>onKeyPress</th>
<th>onKeyUp</th>
</tr> 
<tr>
<th>Key Codes</th> 
    <td id="downKeyCode">0</td> 
    <td id="pressKeyCode">0</td> 
    <td id="upKeyCode">0</td> 
</tr> 
<tr>
<th>Char Codes (IE5/Mac; NN6)</th> 
    <td id="downCharCode">0</td> 
    <td id="pressCharCode">0</td> 
    <td id="upCharCode">0</td> 
</tr> 
<tr>
<th rowspan="3">Modifier Keys</th> 
    <td><span id="shiftDown">Shift</span></td> 
    <td><span id="shift">Shift</span></td> 
    <td><span id="shiftUp">Shift</span></td> 
</tr> 
<tr> 
    <td><span id="ctrlDown">Ctrl</span></td> 
    <td><span id="ctrl">Ctrl</span></td> 
    <td><span id="ctrlUp">Ctrl</span></td> 
</tr> 
<tr> 
    <td><span id="altDown">Alt</span></td> 
    <td><span id="alt">Alt</span></td> 
    <td><span id="altUp">Alt</span></td> 
</tr> 
</table> 
</form>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel