zl程序教程

您现在的位置是:首页 >  前端

当前栏目

JavaScript监听和禁用浏览器回车事件实例

JavaScript实例事件浏览器 监听 禁用 回车
2023-06-13 09:15:43 时间

js监听浏览器回车事件,可以支持ie6+,火狐,谷歌等浏览器。

复制代码代码如下:

<html>
<head>
<scripttype="text/javascript">
//注册键盘事件
document.onkeydown=function(e){
 //捕捉回车事件
 varev=(typeofevent!="undefined")?window.event:e;
 if(ev.keyCode==13){
  alert("捕捉到了回车事件!");
 }
}
</script>
</head>
<body/>
</html>

那么,如何捕捉指定DOM对象的回车事件?这里以input标签为例说明:

复制代码代码如下:


<html>
<head>
<scripttype="text/javascript">
//注册键盘事件
document.onkeydown=function(e){
 //捕捉回车事件
 varev=(typeofevent!="undefined")?window.event:e;
 if(ev.keyCode==13&&document.activeElement.id=="msg"){
  alert("获取到内容:"+document.activeElement.value);
 }
}
</script>
</head>
<body>
<inputtype="text"id="msg"value=""/>
</body>
</html>

那么,js如何禁用浏览器回车事件?我们知道,在HTML表单区域内,按回车时浏览器的默认行为是自动提交表单。下面以这个为例说明js如何去禁用浏览器回车事件:

复制代码代码如下:
<html>
<head>
<scripttype="text/javascript">
//注册键盘事件
document.onkeydown=function(e){
 //捕捉回车事件
 varev=(typeofevent!="undefined")?window.event:e;
 if(ev.keyCode==13&&document.activeElement.id=="msg"){
  returnfalse;//禁用回车事件
 }
}
</script>
</head>
<body>
<formaction="form.php">
<inputtype="text"id="msg"name="msg"value=""/>
<inputtype="submit"value="submit"/>
</form>
</body>
</html>