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 相关文章推荐
使用jquery实现简单的ajax
Jul 08 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
js 操作符汇总
Nov 08 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 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判断客户端类型
2016/10/14 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
javascript常用方法总结
2015/05/14 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
详解Python网络爬虫功能的基本写法
2016/01/28 Python
python实现教务管理系统
2018/03/12 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
详解Django CAS 解决方案
2019/10/30 Python
Python中的全局变量如何理解
2020/06/04 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
护理专业自荐书
2014/06/04 职场文书
个人创业事迹材料
2014/12/30 职场文书
预备党员考察意见范文
2015/06/01 职场文书
母亲节主题班会
2015/08/14 职场文书
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers