利用JavaScript模拟京东按键输入功能
(编辑：jimmy 日期: 2024/11/24 浏览：3 次 )
在看到这个功能的时候我也很惊讶，京东竟然做了这样的一个功能。在京东商城网页版，无论你在什么位置，只需要按下S键，就可以将光标定位到搜索栏进行搜索。虽然说这是一个很不错的功能，但是貌似没有几个人知道。
程序实现很简单，在s键上升的时候搜索框获得焦点就可以了。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>按下S键光标定位搜索框</title>
</head>
<body>
<input type="text">
<script>
var search = document.querySelector('input');
document.addEventListener('keyup',function(e){
//可以使用console.log(e.keyCode)打印一下S键的ASCII值
if(e.keyCode === 83){
search.focus();
}
})
//在这里使用keyup而不使用keydown，
//keydown在键盘按下时触发，焦点放到搜索框，然后会触发S键，使S进入搜索框。
//而使用keyup，是在键盘返回时进行得到焦点，因此搜索框中不会出现s.
</script>
</body>
</html>
附：键盘事件keydown()与keyup()
1.键盘按下事件：keydown() 是在键盘按下就会触发
2.键盘弹起事件：keyup() 是在键盘松手就会触发
<h1>keydown()与keyup()事件</h1>
<div style="margin:10px 0 20px 20px;">
<input class="keydown k1" type="text" placeholder="监听keydown输入:" />
按下显示输入的值:<em style="font-weight: 900;color: red;"></em>
</div>
<div style="margin:20px 0 0 20px;">
<input class="keyup k1" type="text" placeholder="监听keyup输入:" />
松手显示输入的值:<em style="font-weight: 900;color: red;"></em>
</div>
<script src="/UploadFiles/2021-04-02/jquery.2.1.4.min.js">
执行上述代码块可以看出
keydown 事件触发在文字还没敲进文本框，这时如果在 keydown 事件中输出文本框中的文本，得到的是触发键盘事件前的文本，而 keyup 事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本
总结
下一篇：layui使用及简单的三级联动实现教程