利用JavaScript模拟京东按键输入功能
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
在看到这个功能的时候我也很惊讶,京东竟然做了这样的一个功能。在京东商城网页版,无论你在什么位置,只需要按下S键,就可以将光标定位到搜索栏进行搜索。虽然说这是一个很不错的功能,但是貌似没有几个人知道。
程序实现很简单,在s键上升的时候搜索框获得焦点就可以了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!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() 是在键盘松手就会触发
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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模拟京东按键输入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
webpack5新特性Asset Modules资源模块详解
这篇文章主要为大家介绍了webpack5新特性Asset Modules资源模块详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-03-03pnpm install:ERR_PNPM_PEER_DEP_ISSUES Unmet p
这篇文章主要为大家介绍了pnpm install:ERR_PNPM_PEER_DEP_ISSUES Unmet peer dependencies报错解决2023-06-06JavaScript实现向setTimeout执行代码传递参数的方法
这篇文章主要介绍了JavaScript实现向setTimeout执行代码传递参数的方法,分析了向setTimeout传递参数的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
最新评论