利用JavaScript模拟京东按键输入功能       这篇文章主要给大家介绍了关于如何利用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 
 input type="text" placeholder="监听keydown输入:" / 
 按下显示输入的值: em /em 
 /div 
 div 
 input type="text" placeholder="监听keyup输入:" / 
 松手显示输入的值: em /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模拟京东按键输入内容请搜索凡科以前的文章或继续浏览下面的