javascript/jquery键盘事件介绍
一、首先需要知道的是:
1、keydown()
keydown事件会在键盘按下时触发.
2、keyup()
keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件
3、keypress()
keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键
二、获得键盘上对应的ascII码:
$(document).keydown(function(event){ alert(event.keyCode); });
$tips: 上面例子中,event.keyCode就可以帮助我们获取到我们按下了键盘上的什么按键,他返回的是ascII码,比如说上下左右键,分别是38,40,37,39;
三、实例(当按下键盘上的左右方面键时)
代码如下:
$(document).keydown(function(event){ //判断当event.keyCode 为37时(即左方面键),执行函数to_left(); //判断当event.keyCode 为39时(即右方面键),执行函数to_right(); if(event.keyCode == 37){ to_left(); }else if (event.keyCode == 39){ to_right(); } else if (event.keyCode == 38){ to_top(); } else if (event.keyCode == 40){ to_bottom(); } }); function to_left(){ $(".abc").css({'left':'-=10'});} function to_right(){ $(".abc").css({'left':'+=10'});} function to_top(){$(".abc").css({'top':'-=10'});} function to_bottom(){$(".abc").css({'top':'+=10'});}
javascript/jquery键盘事件介绍的更多相关文章
- js进阶 12-4 jquery键盘事件如何使用
js进阶 12-4 jquery键盘事件如何使用 一.总结 一句话总结:键盘和鼠标都是外设输入设备,所以函数很像,所以使用就像鼠标事件click一样 1.jquery键盘事件有哪三个? 1(up和do ...
- javascript的键盘事件大全
javascript的键盘事件大全 ------------------------------------------------------------------- 使用event对象的keyC ...
- jquery键盘事件全记录
很多时候,我们需要获取用户的键盘事件,下面就一起来看看jquery是如何操作键盘事件的. 一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() k ...
- JavaScript 模拟键盘事件
JavaScript 模拟键盘事件和鼠标事件(比如模拟按下回车等) 2016年09月08日 15:23:25 神秘_博士 阅读数:41158 标签: javascript鼠标键盘事件模拟更多 个人分类 ...
- JavaScript获取键盘事件
JavaScript中: onkeydown 事件会在用户按下一个键盘按键时发生. onkeypress 事件会在键盘按键被按下并释放一个键时发生. onkeyup 事件会在键盘按键被松开时发生. 支 ...
- jquery 键盘事件的使用方法详解
转自:https://www.jb51.net/article/123579.htm jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是: jquery 代码: 1. keydown(); ...
- 3-3 编程练习:jQuery键盘事件案例
3-3 编程练习 完善下面的代码,在input框中输入内容的时候同样显示在下面的p标签中 <!DOCTYPE html> <html lang="zh-CN"&g ...
- js/jquery键盘事件及keycode大全
js/jquery的键盘事件分为keypress.keydown和keyup事件 一.键盘事件 1.keydown()事件当按钮被按下时,发生 keydown 事件. 2.keypress()事件ke ...
- jquery键盘事件总结
在工作中在发现同事在写输入密码按键的相关js效果时,发现自己对于这块很是不了解,这几天特地了解了一下,进行以下总结: 一.首先要知道键盘事件的几个属性: 1.keydown():在键盘按下时触发. 2 ...
随机推荐
- 【JavaEE】SSH+Spring Security基础上配置AOP+log4j
Spring Oauth2大多数情况下还是用不到的,主要使用的还是Spring+SpringMVC+Hibernate,有时候加上SpringSecurity,因此,本文及以后的文章的example中 ...
- css3属性小结
/*border-radius*/ .demo2{ border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:300 ...
- .NET 面试基本技术整理
这篇文章主要 整理出来的大部分公司需要的技术 以及一些学习链接,进行恶补一下,以免面试官考倒你 其中也整理了一些面试题需要的可以点击链接 需要掌握的技术 基础概念需要 面向对象 OOD/OOP OOD ...
- Error retrieving parent for item: No resource found that matches the given name 'android:TextAppearance.Material.Widget.Button.Inverse'.
改下build.gradle文件,将里面的compileSdkVersion改为23即可 apply plugin: 'com.android.application' android { compi ...
- Web安全开发注意事项
1.sql注入:这个很常规了,不要拼字符串以及过滤关键字都可以防住,需要注意的是,Cookie提交的参 数也是可以导致注入漏洞的.2.旁注:就是说在保证自己的程序没问题的同时,也要保证同台服务器的其他 ...
- I/O之输出流 OutputStream类
java的I/O技术可以将数据保存到文本.二进制.ZIP压缩文件中,下面来说说一些基本的常识(今天只讲理论).先来说说流,何为流?“流就是一组有 序的数据序列,根据操作的类型,可以分为输入(Input ...
- jvm运行时环境属性一览
前言: 在web编程技术内幕中看到一个用apache组件进行文件下载的例子,对于DiskFileUpload类的setRepositoryPath方法,设置临时文件的存放路径,里面指出如果不调用该方法 ...
- linux ssh更换默认的22端口
1.修改配置文件:/etc/ssh/sshd_config 2.先将Port 22 前面的 # 号去掉,并另起一行.如定义SSH端口号为26611 ,则输入 3.修改完毕后,重启SSH服务,并退出当前 ...
- Jmeter之Http Cookie Manager
一.Http Cookie Manager的作用: 1.自动管理cookie:象浏览器一样的存储和发送Cookie,如果发送一个http请求他的响应中包含Cookie,那么Cookie Manager ...
- select_tag in rails about selected not change and onchange()
make it more easy after http://www.cnblogs.com/juandx/p/4058399.html 1 if you want the selected is ...