jQuery简单获取键盘事件的方法_jquery-js教程-PHP中文网

首页

web前端

js教程

jQuery简单获取键盘事件的方法_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:18 PM

jquery 事件键盘

本文实例讲述了jQuery简单获取键盘事件的方法。分享给大家供大家参考，具体如下：

一、我们什么时候要用到获取键盘事件

做web的时候，为了更人性的设计，我们有的时候会用到键盘事件。例如：输入框下拉提示框，通过键盘的上下键盘来选择自己想要的内容，google的输入框的下拉提示。当我们浏览相册的时候，我们可以能过键盘的左右键，来查看相片。当我们浏览长篇小说，用鼠标滚动很容易不知道看到哪一个行了，可以通键盘上下键来进行翻页，这些小细节也是非常重要的。做网站很大程度在于细节的处理。

二、jquery的键盘事情函数种类

1. keydown事件是在键盘按下时触发的事件
2. keyup事件是在按下键弹起时触发的事件
3. keypress事件是在键盘按下时触发的事件

keypress和keydown在功能差不多，但是在获取事件的内容上有所不同。

二、举例说明

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr" lang="utf-8">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="jquery-1.3.2.js" type="text/javascript"></script>
</head>
<body>
<input value="fi" name="search" id="search_input" maxlength="50" autocomplete="off">
</body>
</html>
<script type="text/javascript">
 $('#search_input')
 .keypress(function(event){
 alert("keypress");
 })
 .keydown(function(event){
 alert("keydown");
 })
 .keyup(function(event){
 alert("keyup");
 });
</script>

登录后复制

三、试验结果

1. 在上面的输入框中，输入一个字母r时，第一次会弹出keydown，以后都会提示keypress
2. 当我们按下pg dn銉时,会先弹出keyup然后在弹出keydown
3. 当我们按下shift＋c时，只会弹出keypress
4. 当我们按下ctrl＋alt时，就不会出现keypress，第一次会出现二个keydown，第二次按的时候，先出现keyup，然后在出现keydown

可能性有很多，我们只要试一试常用的銉就可以了。

四、获得键盘事件对应的ASCII值

<script type="text/javascript">
 $('#search_input')
 .keydown(function(event){
 alert(event.keyCode);
 })
</script>

登录后复制

更多关于jQuery事件操作相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》

希望本文所述对大家jQuery程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7724

Java教程

1643

CakePHP 教程

1396

Laravel 教程

1290

PHP教程

1233

显示更多

Related knowledge

迈从 K87 三模机械键盘新增'风信子轴”'冰淇淋轴”版：Gasket 结构，首发价 299 元起 Feb 29, 2024 pm 05:00 PM

本站2月29日消息，迈从今日为K87三模机械键盘推出了“风信子轴”“琉光冰淇淋轴”两款版本，该键盘主打“Gasket结构、80%配列”，相关轴体键盘价格信息如下：“风信子轴”版：首发价299元“琉光冰淇淋轴”版：首发价379元据介绍，系列键盘使用Gasket结构，采用87键80%配列，全键无冲，支持热插拔，号称选用“原厂/MDA双色PBT键帽”，使用1.2mm单键开槽PCB（下灯位），配备RGB灯效，并拥有磁吸收纳铭牌设计。此外，这款键盘配备6000毫安电池，无线延迟3ms，官方未公布键盘尺寸及

苹果手机键盘怎么设置手写输入法 Mar 08, 2024 pm 02:30 PM

苹果手机键盘用户想要设置手写输入法，但是不知道怎么操作，其实是很简单的，用户可以在手机的键盘设置中直接选择手写输入法输入，如果没有也可以手动添加手写输入法。苹果手机键盘怎么设置手写输入法答：在键盘设置中直接启用手写输入法1、苹果用户在使用输入法的时候，默认是会开启手写输入法的。2、用户只需要在打字的时候直接点击左下角长按选择手写输入法就可以了。3、如果用户的手机里面没有手写输入法也可以进行手动的添加。4、用户进入设置找到通用键盘设置在第一个键盘里面添加手写输入的选项就可以了。5、使用手写输入法可

VGN 联名《艾尔登法环》键鼠系列产品上架：菈妮 / 褪色者定制主题，首发 99 元起 Aug 12, 2024 pm 10:45 PM

本站8月12日消息，VGN于8月6日推出了联名《艾尔登法环》键鼠系列产品，包含键盘、鼠标和鼠标垫，采用菈妮/褪色者定制主题设计，目前系列产品已上架京东，售价99元起。本站附联名新品信息如下：VGN丨艾尔登法环S99PRO键盘该键盘采用纯铝合金外壳，辅以五层消音结构，使用GASKET板簧结构，拥有单键开槽PCB、原厂高度PBT材质键帽、铝合金个性化背板；支持三模连接和SMARTSPEEDX低延迟技术；接入VHUB，可一站式管理多款设备，首发549元。VGN丨艾尔登法环F1PROMAX无线鼠标该鼠标

微信键盘怎么设置皮肤微信键盘皮肤的设置方法 Mar 13, 2024 am 09:04 AM

　　微信键盘怎么设置皮肤？微信键盘是一款非常智能的手机输入法软件，这个软件上面有好多人性化的功能，它可以让用户自己选择输入模式，还可以在这个软件上面以最快的速度找到自己想要的表情然后发出去。这个软件上面还可以让用户自己更换键盘的皮肤，很多用户都还不太清楚要怎么更换皮肤，下面小编整理了皮肤的更换方式供大家参考。微信键盘皮肤的设置方法在手机的微信、短信或其他需要使用键盘的应用中，您可以点击键盘左上角的输入法设置图标，进入设置页面查看各种输入法的功能设置选项。　　2、在输入法的设置页面点击“个性皮肤

Keychron 推出 Q10 Max 三模机械键盘：75% Alice 配列，定价 1238 元起 Mar 08, 2024 am 08:40 AM

本站3月7日消息，Keychron今日发布Q10Max三模机械键盘。该键盘采用75%Alice配列，无轴无键帽套件定价1238元，搭载佳达隆定制木星轴和PBT键帽的键盘定价1358元，今晚8点于天猫旗舰店开售。Q10Max机械键盘隶属于KeychronQMax三模“铝坨坨”系列，该系列已有Q1/Q2/Q3/Q5/Q6/Q60/Q65Max等多款不同布局的键盘上市。▲KeychronQ10Max键盘产品特点Q10Max机身由6063铝CNC工艺制成，使用75%Alice配列，官方宣称“符合人体手腕

艾石头推出 NA87 MAG 87 键磁轴键盘：Asat 结构、8KHz 回报率，199 元 Mar 31, 2024 pm 04:41 PM

本站3月31日消息，艾石头近日在京东上架一款型号为“NA87MAG”的87键磁轴键盘，标准价格219元，支付10元定金尾款立减20元，实际到手199元。据介绍，这款键盘采用Asat结构，号称可提供“HIFI级别的打字音质和一致的硬朗手感”，用户也可以通过更换不同的垫片来调节键盘的手感，实现从硬朗到软弹的自定义切换需求。此外，这款键盘还配备“三维弈局内胆架构”，号称能够通过棋盘格式的单键位封闭设计集中每个键位的声音，从而“实现立体的声音优化”；同时拥有1680万色RGB灯光。此外，这款键盘采用Le

凌豹 K87 / PRO 三模机械键盘首销：Gasket 结构、可选多种键帽轴体，99 元起 Jul 20, 2024 am 01:35 AM

本站7月19日消息，凌豹K87/PRO三模机械键盘将于今晚8点开售，两个版本不同之处主要在于轴体/配色/电池差异，其中标准版配备4000毫安时电池，PRO版本配备8000毫安时电池，本站整理价格信息如下：K87浅云白：99元K87凝夜紫/霞光紫/晴山蓝：149元K87微尘灰/星黛紫：199元K87PRO：249元据介绍，这款键盘采用Gasket结构，使用80%配列布局，可选多种色彩，内置下灯位RGB灯，支持三模连接2.4G(1KHz)/有线(1KHz)/蓝牙(125Hz)。规格方面，系列键盘可选

jQuery小技巧：快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：&lt

See all articles

jQuery简单获取键盘事件的方法_jquery

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题