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 相关文章推荐
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
Vue-cli创建项目从单页面到多页面的方法
Sep 20 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
JS array数组检测方式解析
May 19 Javascript
vue实现简单图片上传
Jun 30 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中的类-什么叫类
2006/11/20 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
js自定义Tab选项卡效果
2017/06/05 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
python中np是做什么的
2020/07/21 Python
运动会800米加油稿
2014/02/22 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
连锁超市项目计划书
2014/09/15 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
培训后的感想
2015/08/07 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS