Posted in Javascript onDecember 01, 2020
在看到这个功能的时候我也很惊讶，京东竟然做了这样的一个功能。在京东商城网页版，无论你在什么位置，只需要按下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="~/Content/jquery.2.1.4.min.js"></script>
<script>
$(".keydown").keydown(function (e) {
$("em").first().text(e.target.value);
});
$(".keyup").keyup(function (e) {
$("em:last").text(e.target.value);
});
</script>
执行上述代码块可以看出
keydown 事件触发在文字还没敲进文本框，这时如果在 keydown 事件中输出文本框中的文本，得到的是触发键盘事件前的文本，而 keyup 事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本
总结
到此这篇关于利用JavaScript模拟京东按键输入功能的文章就介绍到这了,更多相关JS模拟京东按键输入内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！
利用JavaScript模拟京东按键输入功能
- Author -
我是Dreamer啊声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@