DDR爱好者之家

利用JavaScript模拟京东按键输入功能
站长资源 2024/12/24 佚名
27 1538
DDR爱好者之家 Design By 杰米

在看到这个功能的时候我也很惊讶，京东竟然做了这样的一个功能。在京东商城网页版，无论你在什么位置，只需要按下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="/UploadFiles/2021-04-02/jquery.2.1.4.min.js">


执行上述代码块可以看出




keydown 事件触发在文字还没敲进文本框，这时如果在 keydown 事件中输出文本框中的文本，得到的是触发键盘事件前的文本，而 keyup 事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本


总结
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米