利用JavaScript模拟京东按键输入功能
更新时间：2020年12月01日 10:50:05 作者：我是Dreamer啊
这篇文章主要给大家介绍了关于如何利用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模拟京东按键输入功能的文章就介绍到这了,更多相关JS模拟京东按键输入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
JavaScript是一门非常流行的编程语言，许多开发者都会把JavaScript选为入门语言，本文向大家分享JavaScript提高执行效率的小技巧、最佳实践等非常实用的内容2017-03-03
有些时候我们的web程序需要利用cookie来实现一些功能,很多时候我们并不需要非得用服务端来操作cookie,因为js可以也操作cookie.2009-08-08
这篇文章主要介绍了JS实现的base64加密解密,以完整实例形式分析了JavaScript基于base64编码实现加密与解密的具体步骤与相关技巧,并附带了相关的加密解密在线工具地址供大家参考,需要的朋友可以参考下2016-04-04
JS中原型的概念不想多说，这里只是探讨一下修改父类原型属性与覆盖父类原型中属性的区别，防止以后出问题2012-07-07
一些在Jvascript学习实践的实例代码，需要的朋友可以参考下2012-06-06
[红色]CSS+JS构建的图片查看器...2006-07-07
一般来说，我们判断 iframe 是否加载完成其实与 判断JavaScript 文件是否加载完成 采用的方法很类似2010-01-01
这篇文章主要为大家介绍了Websocket通信协议在数字孪生中的应用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了javascript中sort()的用法,实例分析了sort()的功能、定义及使用技巧,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了jQuery scrollFix滚动定位插件,当用户向上或向下滚动页面到一定位置时，目标元素开始固定定位（position:fixed），当回滚到原位置时目标元素恢复到原状态，需要的朋友可以参考下2015-04-04
最新评论