jquery键盘事件总结
在工作中在发现同事在写输入密码按键的相关js效果时,发现自己对于这块很是不了解,这几天特地了解了一下,进行以下总结:
一、首先要知道键盘事件的几个属性:
1、keydown():在键盘按下时触发。
2、keyup():是按下键盘起来后的事件。
3、keypress():在敲击按键时触发,我们可以理解为按下并抬起同一个按键。
二、获得键盘上对应的 ascII 码:
//键码获取
$(document).keydown(function (event) {
alert(event.keyCode);
});
上面例子中,event.keyCode 可以帮助我们获取到我们按下了键盘上的什么按键,它返回的就是 ascII 码,比如说上下左右键,分别是38,40,37,39;
三、案例1:
比如:小说网站中常见的按左右键来实现上一篇文章和下一篇文章;
按 ctrl+enter 实现表单提交(以此提高用户体验);
如果我们要实现 ctrl+enter 提交表单,可以这样:
//键盘操作
$(document).keydown(function (event) {
if (event.ctrlKey && event.keyCode == 13) {
alert('Ctrl+Enter');
};
switch (event.keyCode) {
case 37:
alert('方向键-左');
break;
case 39:
alert('方向键-右');
break;
};
return false;
});
四、案例2:
1、html结构:4个input框
<div class="setpsw input">
<input type="password">
<input type="password">
<input type="password">
<input type="password">
<input type="password">
<input type="password">
</div>
2、css结构
.setpsw {
margin: 0 auto;
height: 50px;
overflow: hidden;
display: inline-block;
}
.setpsw input {
width: 30px;
height: 30px;
padding: 0 0;
float: left;
margin: 5px;
text-align: center;
line-height: 21px;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 3px;
outline:;
background-color: #fff;
}
3、js效果
$(".input input").keyup(function(event){
var e = (event) ? event : window.event;
if((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)){
var value = $(this).val();
var length = value.length;
var val;
if(length>0.5){
val = value.substring(length-1,length);
$(this).val(val).next().focus()
}
}else if(e.keyCode == 8){
$(this).prev().focus()
} else {
var _val = this.value;
this.value = _val.replace(/\D/g,'');
}
});
效果图
jquery键盘事件总结的更多相关文章
- jquery键盘事件全记录
很多时候,我们需要获取用户的键盘事件,下面就一起来看看jquery是如何操作键盘事件的. 一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() k ...
- js进阶 12-4 jquery键盘事件如何使用
js进阶 12-4 jquery键盘事件如何使用 一.总结 一句话总结:键盘和鼠标都是外设输入设备,所以函数很像,所以使用就像鼠标事件click一样 1.jquery键盘事件有哪三个? 1(up和do ...
- 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键盘事件
场景:当我们遇到onclick按钮事件时需要按回车执行时就用到了键盘监听事件 例如:<button id="sign_in_button" class="btn b ...
- javascript/jquery键盘事件介绍
一.首先需要知道的是:1.keydown()keydown事件会在键盘按下时触发.2.keyup()keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件3.keypress()keypres ...
- JQUERY 键盘事件
一 一.首先需要知道的是: 1.keydown()keydown 事件会在键盘按下时触发. 2.keypress()keypress 事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键. 3. ...
- jQuery键盘事件绑定Enter键
<script> $(function(){ $(document).keydown(function(event){ if(event.keyCode==13){ $("#mo ...
随机推荐
- iOS瀑布流实现(Swift)
这段时间突然想到一个很久之前用到的知识-瀑布流,本来想用一个简单的方法,发现自己走入了歧途,最终只能狠下心来重写UICollectionViewFlowLayout.下面我将用两种方法实现瀑布流,以及 ...
- Linux中grep搜索用法
有测试文件test.txt一枚,内容如下 aaabbbcccAAADDDEEEabcsdfjasldjfbcdokmABC 一.基本搜索常用1.现在想把abc okm筛选出来 grep "a ...
- C#设计模式系列:状态模式(State)
1.状态模式简介 1.1>.定义 状态模式的核心思想是允许一个对象在它的内部状态改变时改变它的行为,即不同的状态对应不同的行为. 状态模式的针对性很强,当有状态变化的时候可以选择状态模式. 1. ...
- UGUI 之Scroll Rect 坑
由于UGUI没有提供类似Scroll View类似的控件,但提供了ScrollRect主机.可以自定义Scroll View 同时提供了Mask组件来遮罩超出Scroll Rect对象的范围, 之所以 ...
- Divshot —— 在线的可视化网页设计
Divshot 是一个在线网站,通过可视化方式进行 Web 界面的设计,并直接生成 HTML 和 CSS 代码.该工具提供常用的 Web UI 组件.界面基于 Twitter 的 Bootstrap ...
- 手把手教你用nodejs+SQL Server2012做增删改查
1.开发工具WebStorm 10.0.4 2.打开WebStorm 10.0.4新建项目:
- 如何完全卸载OneDrive (Windows 10 64bit)
原文参考 http://lifehacker.com/how-to-completely-uninstall-onedrive-in-windows-10-1725363532 To complete ...
- [翻译]利用顶点位移的VR畸变校正
文章英文原网址: http://www.gamasutra.com/blogs/BrianKehrer/20160125/264161/VR_Distortion_Correction_using_V ...
- ZOJ Problem Set - 1350 The Drunk Jailer ac代码 memset
这是一道很简单的题目,题目大概意思说下:就是有n个监狱(编号从1到n),第一次全部打开,第二次打开编号为2的倍数的,第三次打开编号为3的倍数的,以此类推...最后问你有几个监狱是打开的 题目中我使用了 ...
- 源码阅读系列:EventBus
title: 源码阅读系列:EventBus date: 2016-12-22 16:16:47 tags: 源码阅读 --- EventBus 是人们在日常开发中经常会用到的开源库,即使是不直接用的 ...