建站资讯

公众号关联小程序_使用JavaScript模仿京东按键输入

作者:admin 发布时间:2021-01-04
利用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模拟京东按键输入内容请搜索凡科以前的文章或继续浏览下面的


收缩