javascript中级--事件--键盘控制
一、键盘控制div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<script>
document.onkeydown = function(ev) {
var oDiv = document.getElementById('div1');
var oEvent = ev || event;
// alert(oEvent.keyCode); //←37↑38→39↓40
// alert(oDiv.offsetWidth);
// return false;
if (oEvent.keyCode == 37) {
oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
} else if (oEvent.keyCode == 39) {
oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
二、ctrl+回车发送消息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function() {
var oTxt1 = document.getElementById('txt1');
var oTxt2 = document.getElementById('txt2');
var oBtn = document.getElementById('btn1');
oBtn.onclick = function() {
oTxt1.value += oTxt2.value + '\n';
oTxt2.value = "";
}
oTxt1.onkeydown = function() {
return false;
}
oTxt2.onkeydown = function(ev) {
var oEvent = ev || event;
if (oEvent.ctrlKey && oEvent.keyCode == 13) { //ctrlKey shiftKey 按着返回true 不按返回false
oTxt1.value += oTxt2.value + '\n';
oTxt2.value = "";
}
}
}
</script>
</head>
<body>
<textarea id="txt1" rows="10" cols="30"></textarea>
<br>
<input id="txt2" type="text" name="" value="">
<input id="btn1" type="button" value="输入">
</body>
</html>
