热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

jQuery键盘事件ctrl+Enter回车键提交表单

分享下jquery键盘事件的一些例子,个人感觉还不错,有空时多多研究。键盘事件处理所有用户在键盘敲击的情况,不管在文本输入区域内部还是外部。键盘事件在不同的浏览器中作用的范围是不一

分享下jquery键盘事件的一些例子,个人感觉还不错,有空时多多研究。

键盘事件处理所有用户在键盘敲击的情况,不管在文本输入区域内部还是外部。键盘事件在不同的浏览器中作用的范围是不一样的,通常这种键盘事件可以作用于 Form元素,a标签元素,window ,document这样的元素上。在所有可以获得交点的元素上是可以触发键盘事件的,可以获得焦点的元素可以这样理解,在使用Tab键的时候可以跳跃到的元素就是可以使用键盘事件的元(在没有为这些元素设置tabindex属性值的情况下,当tabindex设置为负数的时候,在使用Tab键的时候就不会获得焦点)。

键盘事件可以传递一个参数event,其实所有的jQuery事件都可以传递这么一个参数,这个event是一个对象,其包括一些属性,在触发事件的时候可以通过event来获得一些关于事件的值,比如在使用键盘的时候可以使用event.keyCode来获得所按下键的ASCII码的值。见下文
1:keydown()事件是键盘点击时触发的第一个键盘事件,如果用户继续按住键位,keydown事件会持续进行。

$(‘input‘).keydown(function(event){
alert(event.keyCode);
});

通过键盘返回的值可以实现更多的关于这些元素的控制,比如说上下左右键,分别是:38,40,37,39 。

2:keypress()事件和keydown是差不多的,只有一个例外,如果需要阻止按键的默认行为,你必须是哟就keypress事件。
3:keyup()事件是最后一个发生的事件(在keydown事件之后),不想keydown事件,该事件在松开键盘是仅触发一次(因为松开键盘并不是一个持续的状态)。

$(‘input‘).keyup(funciton(){
alert(‘keyup function is running!!‘);
});

4:在jQuery中keydown,keypress,keyup事件是按一定的顺序执行的。

$(‘input‘).keyup(function(){
console.log(‘keyup‘);
});
$(‘input‘).keydown(function(){
console.log(‘keydown‘);
});
$(‘input‘).keypress(function(){
console.log(‘keypress‘);
});

执行结果是:keydown ,keypress ,keyup .

在这里不使用alert是因为在alert的时候会阻止一些事件的发生,在这里是会阻止keyup事件的发生,要想实验这端代码,可以在Firefox下进行,需要在浏览器上装上firebug这个插件。放心安装,因为Firefox是一款开源的浏览器。相信开源软件。
jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是:
keydown();
keyup();
keypress();
keydown()
keydown事件会在键盘按下时触发,可以在绑定的函数中欧能够返回false来防止触发浏览器的默认事件.
keyup()
keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件
keypress()
keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键
我们怎么才能获取我按下的是A还是Z还是回车按钮呢?
键盘事件可以传递一个参数event,其实说有的jQuery事件函数中都可以传递这么一个参数

$(‘input‘).keydown(function(event){
alert(event.keyCode);
});

上面代码中的,event.keyCode就可以帮助我们获取到我们按下了什么按键,他返回的是ascII码,比如说上下左右键,分别是38,40,37,39

如果要实现ctrl+Enter就是ctrl+回车提交表单

$(document).keypress(function(e) {
if (e.ctrlKey && e.which == 13)
$("form").submit();
})

其它参考信息:

预备知识
1.数字0键值48..数字9键值57
2.a键值97..z键值122;A键值65..Z键值90
3.+键值43;-键值45;.键值46;退格8;tab键值9;
4.event在ie中是全局的,在firefox是临时对象,需要传递参数

*/ 
jQuery.extend({ 
/*=========================================================================== 
功能描述:取得按键的值 
调用方法: 
jQuery.getKeyNum(event); 
*/ 
getKeyNum:function(e){ 
var keynum; 
if(window.event){ // IE 
keynum = event.keyCode; 
} 
else if(e.which){ // Netscape/Firefox/Opera 
keynum = e.which; 
} 
return keynum; 
}, 
/*=========================================================================== 
功能描述:判断是否是整数,限制编辑框只能输入数字 
调用方法: 
 
待解决问题: 
firefox下tab键不起作用。 
*/ 
isInt:function(e){ 
var keynum = this.getKeyNum(e); 
if(keynum >= 48 && keynum <= 57 || keynum == 8){//firefox下退格需判断8 
return true; 
} www.jbxue.com
return false; 
}, 
/*=========================================================================== 
功能描述:判断是否是小数,限制编辑框只能输入数字,只能输入一个小数点。 
调用方法: 
 
*/ 
isFloat:function(txt,e){ 
var keynum = this.getKeyNum(e); 
if(keynum == 46){//输入小数点 
if(txt.value.length == 0){ 
return false; 
}else if(txt.value.indexOf(‘.‘) >= 0){ 
return false; 
}else{ 
return true; 
} 
}  www.jbxue.com
if(this.isInt(e)){ 
return true; 
} 
return false; 
} 
});

jQuery键盘事件 ctrl+Enter回车键提交表单,,

jQuery键盘事件 ctrl+Enter回车键提交表单


推荐阅读
  • 凡客诚品官方网站的前端改进建议
    打开http:www.vancl.com发现采用的Asp.net,这点我感到很欣慰,毕竟国内采用.net技术体系的优秀网站少之又少。好奇之余右键-查看源 ... [详细]
  • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ... [详细]
  • JavaWeb介绍概念JavaWeb,是用Java技术来解决相关web互联网领域的技术总和。web包括:web服务器和web客户端两部分。Java在客户端的应用有javaapplet,不过使 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • 本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 分享css中提升优先级属性!important的用法总结
    web前端|css教程css!importantweb前端-css教程本文分享css中提升优先级属性!important的用法总结微信门店展示源码,vscode如何管理站点,ubu ... [详细]
author-avatar
小情冒_256
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有