牛腩新闻发布系统—如何屏蔽Enter键

最新推荐文章于 2019-02-01 10:56:53 发布

张伟杰-Vijay

最新推荐文章于 2019-02-01 10:56:53 发布

阅读量241

点赞数 1

本文链接：https://blog.csdn.net/zwj_jyzl/article/details/86557319

版权

牛腩新闻发布系统专栏收录该内容

4 篇文章 0 订阅

订阅专栏

问题的由来

因为有些浏览器之间各不相同，这也就是前端页面需要兼容各个浏览器的原因。有些浏览器对回车键的设定是，当我们按下回车键时，浏览器会默认把当前页面的表单提交。但是有时候我们并不想这样做，如下图：
在这里插入图片描述
比如，我们按下回车之后只想更改类别名称，如果我们不屏蔽回车键的话，更改完类别名称之后，它还会再执行搜索，然后跳转到另一个界面。这时我们就需要屏蔽回车键了。

为什么会这样？

但是为什么会出现这种情况呢？因为我们是利用 js 事件完成的，但是 js 中的事件触发是一种冒泡型的。什么是冒泡型呢？比如我们当前执行的是输入框中的回车事件，冒泡型的意思就是当我们执行完输入框的回车事件之后，它还会再次执行父元素的回车事件。所以就会出现，更改完类别名称之后再跳转到搜索结果界面。
下面我们来举一个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        function add(sText) {
            var oDiv = document.getElementById("display");
            oDiv.innerHTML += sText;
        }
    </script>
</head>
<body onclick="add('body 的onclick事件触发了<br>');">
    <div onclick="add('div 的onclick事件触发了<br>');">
        <p onclick="add('p 的onclick事件触发了<br>')">Click Me</p>
    </div>
    <div id="display"></div>
</body>
</html>

看一下执行结果：
在这里插入图片描述

如何屏蔽

屏蔽按键的话很简单，只需要在 js 中加上一段代码就好了。

//屏蔽Enter按键
$(document).keydown(function (event) {
    switch (event.keyCode) {
        case 13: return false;
    }
});

加上这段代码，就会把父元素中的回车事件屏蔽掉。如果加上这段代码之后，没有效果，那就查看一下网页的源文件，看一下 button 是什么类型的。
在这里插入图片描述
比如这个按钮的类型就是 submit 的，如果按钮的类型是 image或者submit 的话，就需要我们把它改成普通的按钮类型。

如上图：把按钮的 UseSubmitBehavior 属性改为 false 就好了。它的 type 就会变成 button。