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中window.confirm的行为
Oct 21 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
angularjs http与后台交互的实现示例
Dec 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
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
js 颜色选择插件
2017/01/23 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
Python使用redis pool的一种单例实现方式
2016/04/16 Python
python实现下载文件的三种方法
2017/02/09 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
Django工程的分层结构详解
2019/07/18 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
python颜色随机生成器的实例代码
2020/01/10 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
餐厅执行经理岗位职责范本
2014/02/26 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
安全生产培训心得体会
2016/01/18 职场文书