在输入中按回车后如何避免asp页面重新加载答案

【问题标题】：how to avoid asp page reload after pressing enter in input在输入中按回车后如何避免asp页面重新加载
【发布时间】：2017-05-26 14:14:27
【问题描述】：

我尝试在输入字段（实际上是条形码输入）中捕捉 Enter 键以取消隐藏按钮。这适用于我们的工作流程：首先输入一个数字，然后显示一些按钮以继续。看起来很简单，但我就是不让它工作。按 Enter 时，页面似乎再次加载，这在 firebug 中可见。该按钮在很短的时间内可见，然后重新加载将其重新初始化为隐藏状态。

这是我的代码：

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder_Head" runat="Server">
<script>
    $(document).ready(function () {
        // initialize with invisible borders
        _Quant_notQuali = null;
        QuantQuali_SetBorders();
        $('div#quantqual').hide();
        $('input#barcode').val('');
        $('input#barcode').keyup(function (e) {
            e.preventDefault();
            if (e.keyCode === 13) {
                $('div#quantqual').show();
            }
            return false;
        });
        return;
    });
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder_Body" runat="Server">
<div>
    Barcode:
    <input id="barcode" type="text" style="font-size: larger;" />
</div>
<div id="quantqual">
    <div class="button" id="quant" onclick="_Quant_notQuali = true; QuantQuali_SetBorders();">Kwantitatief</div>
    <div class="button" id="quali" onclick="_Quant_notQuali = false; QuantQuali_SetBorders();">Kwalitatief</div>
</div>

为什么按下/捕捉回车后页面会重新加载？或者在show()之后？

这可能是因为与 ASP 系统的交互吗？（或 MasterPage？）input 元素没有 runat=server，因为稍后将通过一些 ajax 调用将数据发送到服务器。

我在这里完全不知所措......

【问题讨论】：

您的页面上有提交按钮吗？
不是，但是ASP系统可能会插入一个？没写过，在FireBug里也看不到，但是ASP页面毕竟是一个表单。
api.jquery.com/event.preventdefault
试过这个，没有帮助:-(

标签： jquery asp.net input

【解决方案1】：

找到了。睡个好觉有什么帮助:-)

首先，提交不是由<input type=submit/> 元素引起的，因为没有。提交是由 ASP 页的<form> 元素中的action 属性引起的。我用这个简单的 html 页面对此进行了测试：

<html>
<head>
</head>
<body>
    <form action="page.aspx">
        <div>
            Barcode: <input id="barcode" type="text" />
        </div>
    </form>
</body>
</html>

一旦您按下 Enter，页面就会尝试加载 page.aspx。

有趣的是，如果您添加通常的提交按钮，在输入文本字段中按 Enter 不会执行任何操作。这将是我的问题的一种解决方案。

大多数项目都有一个提交按钮，如果你想在密码输入文本字段中使用 Enter 键来加载操作页面，你需要额外的 JS，如this article中所述

其次，e.preventDefault(); 不应该在<input> 元素上执行，而是在整个窗口上执行。将在那篇文章中找到的这个添加到上面的代码中解决了这个问题：

    $(document).ready(function () {
        ...
        // prevent Submit when pressing Enter key
        $(window).keydown(function (e) {
            if (e.keyCode == 13) {
                e.preventDefault();
                return false;
            }
        });

【讨论】：

【解决方案2】：

我遇到了与 <button type="button> 元素类似的问题，其中 jQuery 点击处理程序导致页面刷新。尝试在 keyup() 处理程序中添加一个 e.preventDefault()。

$('input#barcode').keyup(function (e) {
    e.preventDefault();

    if (e.keyCode === 13) {
        $('div#quantqual').show();
    }
    return false;
});

【讨论】：

尝试将 .change() 事件处理程序添加到 input#barcode 并带有代表 DOM 事件的参数。在那里添加一个 preventDefault() 。这将在执行 .val('') 值更改之前。
作为测试，将 keyup() 处理程序回调中的代码替换为 return false; 并查看是否仍然刷新。
我尝试了这两个建议，但没有帮助。仍在重新加载。
您可能需要检查QuantQuali_SetBorders(); 并确定它是否设置了某种事件处理程序。此外，正如您在问题中提到的，如果您的母版页或父模板有处理程序。那些可能需要return false; 或preventDefault()/stopPropogation() 申请。
母版页很空，只有一个asp:LoginView 控件。此外，查看 View Source 或 Firebug，我应该会看到页面的所有 html，并且视图中没有提交。我仍然同意 ASP 可能需要提交的地方

【解决方案3】：

试试这个：

$('input#barcode').keyup(function (e) {
 e.preventDefault();
            if (e.keyCode == 13) {
                //Add this
                e.returnValue=false;
                e.cancel = true;

                $('div#quantqual').show();
                return false;
            }

        });

【讨论】：

你能发布更多的 HTML 吗？
我编辑了我的解决方案，试试吧。当您进行比较时，可能不会评估类型，只需检查其相等即可。怀疑这是问题所在，但可能是。
没用 :-( 现在必须回家，明天我会在普通的 html 非 asp 页面中尝试 JS。到目前为止，谢谢。