JavaScript监听和禁用浏览器回车事件实例


Posted in Javascript onJanuary 31, 2015

js监听浏览器回车事件,可以支持ie6+,火狐,谷歌等浏览器。

<html>

<head>

<script type="text/javascript">

//注册键盘事件

document.onkeydown = function(e) {

 //捕捉回车事件

 var ev = (typeof event!= 'undefined') ? window.event : e;

 if(ev.keyCode == 13) {

  alert('捕捉到了回车事件!');

 }

}

</script>

</head>

<body />

</html>

那么,如何捕捉指定DOM对象的回车事件?这里以input标签为例说明:

<html>

<head>

<script type="text/javascript">

//注册键盘事件

document.onkeydown = function(e) {

 //捕捉回车事件

 var ev = (typeof event!= 'undefined') ? window.event : e;

 if(ev.keyCode == 13 && document.activeElement.id == "msg") {

  alert("获取到内容:" + document.activeElement.value);

 }

}

</script>

</head>

<body>

<input type="text" id="msg" value="" />

</body>

</html>

那么,js如何禁用浏览器回车事件?我们知道,在HTML表单区域内,按回车时浏览器的默认行为是自动提交表单。下面以这个为例说明js如何去禁用浏览器回车事件:

<html>

<head>

<script type="text/javascript">

//注册键盘事件

document.onkeydown = function(e) {

 //捕捉回车事件

 var ev = (typeof event!= 'undefined') ? window.event : e;

 if(ev.keyCode == 13 && document.activeElement.id == "msg") {

  return false;//禁用回车事件

 }

}

</script>

</head>

<body>

<form action="form.php">

<input type="text" id="msg" name="msg" value="" />

<input type="submit" value="submit"/>

</form>

</body>

</html>
Javascript 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
Javascript 面向对象之重载
May 04 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
24款热门实用的jQuery插件推荐
Dec 24 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 #Javascript
JavaScript实现的双向跨域插件分享
Jan 31 #Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 #Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 #Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 #Javascript
jQuery知识点整理
Jan 30 #Javascript
浅谈jquery回调函数callback的使用
Jan 30 #Javascript
You might like
JAVA/JSP学习系列之四
2006/10/09 PHP
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
Python备份Mysql脚本
2008/08/11 Python
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
Python将图片转换为字符画的方法
2020/06/16 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
阳光体育活动方案
2014/02/16 职场文书
建筑投标担保书
2014/05/20 职场文书
企业诚信承诺书
2014/05/23 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
企业财务管理制度范本
2015/08/04 职场文书
中秋节感想
2015/08/10 职场文书
运动会广播稿300字
2015/08/19 职场文书
win10下go mod配置方式
2021/04/25 Golang
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android