键盘相关信息
键盘事件(一般只给可以输入内容的元素绑定 或者 window绑定)
1、onkeydown
(按下键盘键的时候触发)
2、onkeyup
(松开键盘键的时候触发)
3、onkeypress
(按下字符键的时候触发,不包括Ctrl和shift等)
<input type="text" id="btn">
<script>
var btn = document.querySelector('#btn');
//当input有输入内容时,触发按键按下事件
btn.onkeydown = function (e) {
e = e || window.event;
console.log(e);
}
</script>
说明
- which: 如果是
keydown
或者keyup
事件的时候 得到是 键盘的编码 - which: 如果按下的
keypress
得到的值 字符的 ASCII码 - key: 得到 键盘 字符
- altKey: 表示你按下的是否是 alt
- ctrlKey: 表示你按下的是否是 ctrl
- shiftKey: 表示你按下的是否是 shift (true和false)
- keyCode: 表示键盘的键码
注意:keyup
和keypress
不能监听多个键盘事件,比如同时按下Ctrl和shift键的话,他们两个可能接收不到按下信息
Keycode对照表
案例说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 800px;
margin: auto;
}
.box .content {
width: 100%;
height: 350px;
border: 1px solid #ccc;
margin: 20px auto;
padding: 10px;
box-sizing: border-box;
}
.box .content li {
margin: 10px 0;
padding: 5px;
line-height: 2;
border-radius: 5px;
clear: both;
}
.box textarea {
height: 80px;
display: block;
margin: auto;
margin-top: 20px;
width: 100%;
}
.box button {
width: 80px;
height: 30px;
border: 1px solid #ccc;
float: right;
margin-top: 10px;
}
.active {
float: right;
background-color: #fc0;
color: #fff;
}
p {
color: #ccc;
font-size: 12px;
}
</style>
</head>
<body>
<div class="box">
<ul class="content"></ul>
<textarea name="" id="text" cols="30" rows="10"></textarea>
<button id="btn">发送</button>
<p>温馨提示:按 ctrl + shift键也可以发送消息哟</p>
</div>
<script>
/*
【1】点击发送按钮的时候 获取输入框的信息
【2】把信息 写入 content里面
*/
// 获取所需要的元素
var content = document.querySelector('.content');
var text = document.querySelector('#text');
var btn = document.querySelector('#btn');
// 给按钮绑定点击事件
btn.onclick = function () {
if (text.value) {
render()
} else {
alert('请输入内容')
}
}
// 按下ctrl + shift键也可以发送信息
text.onkeydown = function (e) {
// console.log(e.ctrlKey);
// keydown 可以同时监听多个按下的事件
// 注意:keyup 和 keypress 不能监听多个事件
if (e.ctrlKey && e.shiftKey) {
if (text.value) {
render()
} else {
alert('请输入内容')
}
}
}
function render() {
// 获取输入框的内容 并且还要创建一个元素来接收内容
var li = document.createElement('li');
li.className = 'active';
li.innerHTML = text.value;
// 把创建的这个标签写入 content
content.appendChild(li);
// 清空输入框的内容
text.value = ''
}
</script>
</body>
</html>
当按下Ctrl和shift键时,触发调用函数render
注意:keydown可以监听多个键盘按下事件