<script>
// 常用的鍵盤事件
//1. keyup 按鍵彈起的時候觸發
document.addEventListener('keyup', function() {
console.log('我彈起了');
})
//3. keypress 按鍵按下的時候觸發 不能識別功能鍵 比如 ctrl shift 左右箭頭啊
document.addEventListener('keypress', function() {
console.log('我按下了press');
})
//2. keydown 按鍵按下的時候觸發 能識別功能鍵 比如 ctrl shift 左右箭頭啊
document.addEventListener('keydown', function() {
console.log('我按下了down');
})
// 4. 三個事件的執行順序 keydown -- keypress -- keyup
</script>
2 鍵盤事件對象
使用keyCode屬性判斷用戶按下哪個鍵
<script>
// 鍵盤事件對象中的keyCode屬性可以得到相應鍵的ASCII碼值
document.addEventListener('keyup', function(e) {
console.log('up:' + e.keyCode);
// 我們可以利用keycode返回的ASCII碼值來判斷用戶按下了那個鍵
if (e.keyCode === 65) {
alert('您按下的a鍵');
} else {
alert('您沒有按下a鍵')
}
})
document.addEventListener('keypress', function(e) {
// console.log(e);
console.log('press:' + e.keyCode);
})
</script>
3 案例：模擬京東按鍵輸入內容
當我們按下 s 鍵， 光標就定位到搜索框（文本框獲得焦點）。
注意：觸發獲得焦點事件，可以使用 元素對象.focus()
<input type="text">
<script>
// 獲取輸入框
var search = document.querySelector('input');
// 給document注冊keyup事件
document.addEventListener('keyup', function(e) {
// 判斷keyCode的值
if (e.keyCode === 83) {
// 觸發輸入框的獲得焦點事件
search.focus();
}
})
</script>
4 案例：模擬京東快遞單號查詢
要求：當我們在文本框中輸入內容時，文本框上面自動顯示大字號的內容。
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="請輸入您的快遞單號" class="jd">
</div>
<script>
// 獲取要操作的元素
var con = document.querySelector('.con');
var jd_input = document.querySelector('.jd');
// 給輸入框注冊keyup事件
jd_input.addEventListener('keyup', function() {
// 判斷輸入框內容是否為空
if (this.value == '') {
// 為空，隱藏放大提示盒子
con.style.display = 'none';
} else {
// 不為空，顯示放大提示盒子，設置盒子的內容
con.style.display = 'block';
con.innerText = this.value;
}
})
// 給輸入框注冊失去焦點事件，隱藏放大提示盒子
jd_input.addEventListener('blur', function() {
con.style.display = 'none';
})
// 給輸入框注冊獲得焦點事件
jd_input.addEventListener('focus', function() {
// 判斷輸入框內容是否為空
if (this.value !== '') {
// 不為空則顯示提示盒子
con.style.display = 'block';
}
})
</script>