热门标签 | 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回车键提交表单


推荐阅读
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • [c++基础]STL
    cppfig15_10.cppincludeincludeusingnamespacestd;templatevoidprintVector(constvector&integer ... [详细]
  • 本文详细介绍了如何解决DNS服务器配置转发无法解析的问题,包括编辑主配置文件和重启域名服务的具体步骤。 ... [详细]
  • importpymysql#一、直接连接mysql数据库'''coonpymysql.connect(host'192.168.*.*',u ... [详细]
  • 微软推出Windows Terminal Preview v0.10
    微软近期发布了Windows Terminal Preview v0.10,用户可以在微软商店或GitHub上获取这一更新。该版本在2月份发布的v0.9基础上,新增了鼠标输入和复制Pane等功能。 ... [详细]
  • 第二十五天接口、多态
    1.java是面向对象的语言。设计模式:接口接口类是从java里衍生出来的,不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ... [详细]
  • 解决Parallels Desktop错误15265的方法
    本文详细介绍了在使用Parallels Desktop时遇到错误15265的多种解决方案,包括检查网络连接、关闭代理服务器和修改主机文件等步骤。 ... [详细]
  • 解决 Windows Server 2016 网络连接问题
    本文详细介绍了如何解决 Windows Server 2016 在使用无线网络 (WLAN) 和有线网络 (以太网) 时遇到的连接问题。包括添加必要的功能和安装正确的驱动程序。 ... [详细]
  • 使用Jsoup解析并遍历HTML文档时,该库能够高效地生成一个清晰、规范的解析树,即使源HTML文档存在格式问题。Jsoup具备强大的容错能力,能够处理多种异常情况,如未闭合的标签等,确保解析结果的准确性和完整性。 ... [详细]
  • 网络爬虫的规范与限制
    本文探讨了网络爬虫引发的问题及其解决方案,重点介绍了Robots协议的作用和使用方法,旨在为网络爬虫的合理使用提供指导。 ... [详细]
  • 本文介绍了 AngularJS 中的 $compile 服务及其用法,通过示例代码展示了如何使用 $compile 动态编译和链接 HTML 元素。 ... [详细]
  • ZooKeeper 入门指南
    本文将详细介绍ZooKeeper的工作机制、特点、数据结构以及常见的应用场景,包括统一命名服务、统一配置管理、统一集群管理、服务器动态上下线和软负载均衡。 ... [详细]
  • 自动验证时页面显示问题的解决方法
    在使用自动验证功能时,页面未能正确显示错误信息。通过使用 `dump($info->getError())` 可以帮助诊断和解决问题。 ... [详细]
  • 自定义滚动条美化页面内容
    当页面内容超出显示范围时,为了提升用户体验和页面美观,通常会添加滚动条。如果默认的浏览器滚动条无法满足设计需求,我们可以自定义一个符合要求的滚动条。本文将详细介绍自定义滚动条的实现过程。 ... [详细]
  • 本文详细介绍了DMA控制器如何通过映射表处理来自外设的请求,包括映射表的设计和实现方法。 ... [详细]
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社区 版权所有