利用JavaScript模拟京东按键输入功能
时间：2021-11-28 11:30:10|栏目：JavaScript代码|点击： 次
在看到这个功能的时候我也很惊讶，京东竟然做了这样的一个功能。在京东商城网页版，无论你在什么位置，只需要按下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代码
下一篇：javascript权威指南 学习笔记之javascript数据类型
本文地址：http://www.codeinn.net/misctech/185014.html
