Question

我尝试在输入字段中捕获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>

为什么在按下/捕获Enter后页面会重新加载？或者可能在show()之后？

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

我在这里完全失败了......

Answer 1

试试这个：

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

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

        });

Answer 2

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

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

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

Answer 3

找到它。一夜好眠可以帮助： - ）

首先，提交不是由<input type=submit/>元素引起的，因为没有元素。提交是由ASP页面的action元素中的<form>属性引起的。我用这个简单的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;
            }
        });

按Enter键输入后如何避免重新加载asp页面

3 个答案: