在输入中按回车后如何避免asp页面重新加载
Posted
技术标签:
【中文标题】在输入中按回车后如何避免asp页面重新加载【英文标题】：how to avoid asp page reload after pressing enter in input 【发布时间】：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 试过这个，没有帮助:-( 【参考方案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。到目前为止，谢谢。以上是关于在输入中按回车后如何避免asp页面重新加载的主要内容，如果未能解决你的问题，请参考以下文章