鍵盤事件 · JavaScript學習記錄

### 鍵盤事件 - `keyCode` - 獲取用戶按下鍵盤的哪個鍵：`onkeydown` / `onkeyup` - 例子：鍵盤控制 `Div` 移動 - 其它屬性 - `ctrlKey`、`shiftKey`、`altKey` - 例子：提交留言 - 回車提交 - CTRL + 回車提交 - 代碼： ```HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>鍵盤控制元素移動和回車提交</title> <link rel="stylesheet" href="../reset.css"> <style> /* 評論區 */ #div_comments { position: absolute; display: block; padding-top: 20px; width: 640px; background-color: rgb(252, 229, 200); } #div_com_inp { margin-top: 5px; border-top: burlywood dashed 1px; border-bottom: burlywood dashed 1px; } .text { margin: 20px 0 20px 53px; } .btn { margin: 20px 0 20px 20px; width: 70px; height: 70px; } #div_com_show { height: 200px; margin: 20px 50px; padding: 0px 20px; background-color: rgb(255, 255, 255); overflow: hidden; } .li_comment { white-space: pre-wrap; padding: 10px 5px; float: none; border-bottom: cadetblue dashed 1px; opacity: 0; filter: alpha(opacity=0); overflow: hidden; } </style> <script> // 封裝 getElementById 函數 function get(id) { return document.getElementById(id); } window.onload = function () { // var oDiv = get('div1'); // document.onkeydown = function () { // var ev = event||ev; // if (ev.keyCode === 37) { // oDiv.style.left = oDiv.offsetLeft - 10 + 'px' // } else if (ev.keyCode === 39) { // oDiv.style.left = oDiv.offsetLeft + 10 + 'px' // } else if (ev.keyCode === 38) { // oDiv.style.top = oDiv.offsetTop - 10 + 'px' // } else if (ev.keyCode === 40) { // oDiv.style.top = oDiv.offsetTop + 10 + 'px' // } // } //獲取Div元素 var oDiv = document.getElementById("div_comments"); //創建各個方向條件判斷初始變量 var left = false; var right = false; var top = false; var bottom = false; //當按下對應方向鍵時，對應變量為true document.onkeydown = function(ev){ var oEvent = ev || event; var keyCode = oEvent.keyCode; switch(keyCode){ case 37: left=true; break; case 38: top=true; break; case 39: right=true; break; case 40: bottom=true; break; } }; //設置一個定時，時間為50左右，不要太高也不要太低 setInterval(function(){ //當其中一個條件為true時，則執行當前函數（移動對應方向） if(left){ oDiv.style.left = oDiv.offsetLeft-10+"px"; }else if(top){ oDiv.style.top = oDiv.offsetTop-10+"px"; }else if(right){ oDiv.style.left = oDiv.offsetLeft+10+"px"; }else if(bottom){ oDiv.style.top = oDiv.offsetTop+10+"px"; } },30); //執行完后，所有對應變量恢復為false，保持靜止不動 document.onkeyup = function(ev){ var oEvent = ev || event; var keyCode = oEvent.keyCode; switch(keyCode){ case 37: left=false; break; case 38: top=false; break; case 39: right=false; break; case 40: bottom=false; break; } } // btn 提交 var btn = get('btn_comment'); var txt = get('text_comment'); var board = get('div_com_show'); btn.onclick = function () { if (true) { var oP = document.createElement('p'); oP.innerHTML = txt.value; txt.value = ''; if (board.children.length > 0) { board.insertBefore(oP,board.children[0]) } else { board.appendChild(oP); } } } // ctrl + enter 提交 txt.onkeydown = function (ev) { var ev = ev||event; if (ev.keyCode === 13 && ev.ctrlKey) { var oP = document.createElement('p'); oP.innerHTML = txt.value; txt.value = ''; if (board.children.length > 0) { board.insertBefore(oP,board.children[0]) } else { board.appendChild(oP); } } } } </script> </head> <body> <div id="div_comments"> <div id="div_com_inp"> <textarea class="text" name="" id="text_comment" cols="60" rows="5"></textarea> <input class="btn" type="button" name="" id="btn_comment" value="發表評論"> </div> <div id="div_com_show"> <p>CTRL + 回車提交</p> <p>鍵盤控制留言框位置</p> </div> </div> </body> </html> ```