利用JavaScript模拟京东按键输入功能

2024-07-28 13:36:01

在看到这个功能的时候我也很惊讶，京东竟然做了这样的一个功能。在京东商城网页版，无论你在什么位置，只需要按下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模拟京东按键输入内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JS实现京东商品分类侧边栏

本文实例为大家分享了JS实现京东商品分类侧边栏的具体代码,供大家参考,具体内容如下 HTML代码部分 <div> <img src="/1.png" alt=""> </div> <ul> <li><a href="">京东秒杀</a></li> <li class="two"><a href="&quo
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析

一.环境准备 python3.8.3 pycharm 项目所需第三方包 pip install scrapy fake-useragent requests selenium virtualenv -i https://pypi.douban.com/simple 1.1 创建虚拟环境切换到指定目录创建 virtualenv .venv 创建完记得激活虚拟环境 1.2 创建项目 scrapy startproject 项目名称 1.3 使用pycharm打开项目,将创建的虚拟环境配置到项目中来
Android实现京东首页效果

本文实例为大家分享了Android实现京东首页效果的具体代码,供大家参考,具体内容如下 1.效果图: 2.布局源码链接 <?xml version="1.0" encoding="utf-8"?> <com.scwang.smart.refresh.layout.SmartRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns
仿京东平台框架开发开放平台(包含需求,服务端代码,SDK代码)

目录 1开放平台需求 1.1调用参数 1.2签名算法 2服务端代码,Java举例 2.1接口入口代码 2.2业务逻辑层 2.3基础工具类 3.SDK代码,Java举例 4.集成SDK,代码举例 5.总结 1开放平台需求用户需要按照开放平台的协议规范拼装一个正确的URL,通过Https请求到开放平台既能够获取到所需数据.主要流程包含:填写参数.生成签名.拼装HTTPS请求.发起请求.得到响应结果.解析结果. 1.1调用参数参数名称参数类型是否必传参数描述 method String 是
利用JavaScript模拟京东按键输入功能

在看到这个功能的时候我也很惊讶,京东竟然做了这样的一个功能.在京东商城网页版,无论你在什么位置,只需要按下S键,就可以将光标定位到搜索栏进行搜索.虽然说这是一个很不错的功能,但是貌似没有几个人知道. 程序实现很简单,在s键上升的时候搜索框获得焦点就可以了. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name=&q
利用JavaScript模拟京东快递单号查询效果

1.上面放大框开始是隐藏的,当输入单号后,就显示,并且里面的内容是输入框的内容的字体的放大 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
利用JAVASCRIPT控制MEDIA PLAYER的功能实现

<script language=javascript defer> var volv=phx.settings.volume; setInterval("if(phx.playState==3){time.innerText=phx.controls.currentPositionString+\'|\'+ phx.currentMedia.durationString}",1000); setInterval("if(phx.playState==3){itc
VUE利用vuex模拟实现新闻点赞功能实例

回顾新闻详细页很早我们的新闻详情页是在news-detail.vue 组件里,获取服务器数据,然后把数据保持到组件的data 里,既然我们已经用到了vuex,学习了它的state,我们就应该想到把返回的数据交给state 来存储. 1.首先在Vuex.Store 实例化的时候: state:{ user_name:"", newslist:[], newsdetail:{} }, 增加一个newsdetail 对象,newslist 数组是我们前面用来保存新闻列表数据的. 2.下面就
使用JavaScrip模拟实现仿京东搜索框功能

使用js模拟实现京东的搜索框,主要用了js中的onfocus(注册焦点事件),onblur(失去焦点的事件): 主要实现了: 在鼠标点进去的时候,里面的默认内容消失: 在输入之后,再点击搜索框外,输入的内容还在搜索框中: 如果输入为空,点击搜索框外,里面自动显示默认内容: 内容颜色的改变效果图代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>京东搜
利用JavaScript实现仿京东放大镜效果

功能实现 1.鼠标经过小图片盒子,黄色的遮挡层和大图片显示,离开时就隐藏2个盒子功能 2.黄色遮挡层跟着鼠标走把鼠标的坐标给盒子,不断地进行赋值操作把鼠标地坐标给遮挡层不合适,因为遮挡层坐标以父盒子为准首先是获得鼠标在盒子内地坐标然后把数值给遮挡层地left和top值此时用到鼠标移动事件,但是还是在小图片盒子内移动发现,遮挡层位置不对,需要再减去盒子自身高度和宽度地一半遮挡层不能超出小图片盒子范围如果小于0,就把坐标设置为0 如果大于遮挡层最大地移动距离,就把坐标设置为最大地移动
JavaScript利用正则表达式来禁止键盘输入数字

今日在看JavaScript的时候,发现键盘响应时间onkeydown和一些其他的相关事件都停用了keyCode这个属性,而keyCode这个属性返回的是键盘按键的ASCII码值,停用后有个code属性替代,但也不完全替代,因为code属性返回的是键值本身的值,所以写法也不一样,下面用正则表达式来禁止输入框输入数字,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&
Python模拟百度自动输入搜索功能的实例

如下所示: # 访问百度,模拟自动输入搜索 # 代码中引入selenium版本为:3.4.3 # 通过Chrom浏览器访问发起请求 # Chrom版本:59 ,chromdriver:2.3 # 需要对应版本的Chrom和chromdriver # 请联系QQ:878799579 from selenium import webdriver # 引入Keys类包发起键盘操作 from selenium.webdriver.common.keys import Keys import time
微信小程序车牌号码模拟键盘输入功能的实现代码

先来一波预览图. 预览图片一: 预览图二: 预览图三: 预览图四: 预览图五: 大概的效果就和原来图差不多. 思路解析:车牌号码由31位汉字,26位字母,10位数字组成的,开头第一位由省份简称的汉字,第二位字母根据省份下的城市或地区区分,最后的五位或者六位,是有字母和数字组成的,共有七位的车牌号码和八位的车牌号码,(注:其中的八位数的车牌号码为能源车的车牌号码.) 大概的逻辑思维,不包含代码获取值什么的或者验证其他的说明,详细看代码片段. 第一,原型的设计思路:先设计好模拟键盘的大概架构,样式.
javascript利用canvas实现鼠标拖拽功能

利用canvas实现鼠标拖拽功能,当在元素上按下鼠标并移动时,元素跟着鼠标移动. 效果: 主要思路: 当鼠标按下时,用isPointInPath方法判断鼠标位置是否在元素上,如果在则鼠标移动时元素跟着移动:当鼠标抬起时,将鼠标移动事件和抬起事件置空. 代码如下: <canvas id="can" width="400" height="400"></canvas> <script type="text/ja

利用JavaScript模拟京东按键输入功能

相关推荐

随机推荐