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 相关文章推荐
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
动态加载js文件简单示例
Apr 21 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
javascript填充默认头像方法
Feb 22 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 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下读取文本文件的代码
2008/07/02 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
javascript 页面划词搜索JS
2009/09/28 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
Python3读取zip文件信息的方法
2015/05/22 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
关于python3中setup.py小概念解析
2019/08/22 Python
python 实现线程之间的通信示例
2020/02/14 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
英国足球店:UK Soccer Shop
2017/11/19 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
办公自动化毕业生求职信
2014/03/09 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
初中英语课后反思
2014/04/25 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
信息简报范文
2015/07/21 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
MySQL七种JOIN类型小结
2021/10/24 MySQL