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 相关文章推荐
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
Angularjs 基础入门
Dec 26 Javascript
jquery实现图片预加载
Dec 25 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
vuejs指令详解
Feb 07 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 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
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
jquery 学习之二 属性相关
2010/11/23 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
JavaScript window.location对象
2014/11/14 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
Node.js中DNS模块学习总结
2018/02/28 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
python的正则表达式re模块的常用方法
2013/03/09 Python
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
Python实现端口检测的方法
2018/07/24 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
建筑经济管理专业求职信分享
2014/01/06 职场文书
微型企业创业投资计划书
2014/01/10 职场文书
普通员工辞职信
2014/01/17 职场文书
项目合作协议书范本
2014/04/16 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
2014财务年度工作总结
2014/11/11 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
结婚司仪主持词
2015/06/29 职场文书
格林童话读书笔记
2015/06/30 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书