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 相关文章推荐
Javascript 实用小技巧
Apr 07 Javascript
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
javascript RegExp 使用说明
May 21 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
js绘制一条直线并旋转45度
Aug 21 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
最省空间的计数器
2006/10/09 PHP
自己前几天写的无限分类类
2007/02/14 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
php统计数组元素个数的方法
2015/07/02 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
uploadify 3.0 详细使用说明
2012/06/18 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
Python API len函数操作过程解析
2020/03/05 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
中学生自我评价范文
2014/02/08 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
天猫活动策划方案
2014/08/21 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
银行催款通知书
2015/04/17 职场文书
赵氏孤儿观后感
2015/06/09 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书