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参数列表集合
Apr 06 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
Bootstrap table分页问题汇总
May 30 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
JavaScript中Require调用js的实例分享
Oct 27 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 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/01/26 PHP
Jquery插件之多图片异步上传
2010/10/20 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
python实现百万答题自动百度搜索答案
2018/01/16 Python
Python----数据预处理代码实例
2019/03/20 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
初中考试作弊检讨书
2014/02/01 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL