Question

我正在尝试运行一些javascript代码，当按下'Enter'键时焦点位于特定文本框上。如果发生这种情况，我不希望页面回发。（但是，如果有人点击提交按钮，那么我希望页面像往常一样回发。）

我有一个包含以下内容的页面：

<script type="text/javascript">
$(function () {
    $('#txtInput').on('keyup', function (e) {
        if (e.keyCode == 13) {
            alert('enter was clicked');
            return false;
        }
    });
});
</script>

<asp:TextBox ID="txtInput" runat="server" ClientIDMode="Static"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmitClick" Text="Submit" />

我一直认为return false;是实现这一目标的方法，但在这种情况下，它无效。

我也在我的javascript函数中尝试过以下内容，但无济于事。

$(function () {
    $('#txtInput').on('keyup', function (e) {
        if (e.keyCode == 13) {
            e.cancel = true;
            e.returnValue = false;
            alert('enter was clicked');
        }
    });
});

我的问题是：

1。为什么这不起作用？

2。我该如何实现这种行为？

Answer 1

您需要使用按键事件，因为它发布在密钥释放之前，因此可以取消。

引用评论：

可能是因为keyup事件。从理论上讲，关键已经存在事情已经发生了。您是否尝试过 keypress 代替？

Answer 2

刚试过这个，它只适用于keydown事件，当密钥被释放时为时已晚：

$(function () {
    $('#txtInput').on('keydown', function(e) {
        if (e.which == 13) e.preventDefault();
    });
});

FIDDLE

Answer 3

您是否尝试过使用e.PreventDefault()？对于这种情况，您可能还需要使用keydown或keypress来捕获默认事件。

<script type="text/javascript">
$(function () {
    $('#txtInput').on('keydown', function (e) {
        if (e.which == 13) {
            e.PreventDefault();
            alert('enter was clicked');
        }
    });
});
</script>

但是，您应该知道，通过打破键盘功能，您无法满足可访问性标准，这可能会使某些用户感到困难。确保为仅键盘用户提供导航方式。

编辑：由于您的问题（ASP.NET）的性质，您可能需要以不同的方式处理此问题。

您可以a）查看这个问题：Canceling the default submit button in ASP.NET或b）应用上面的Javascript解决方案，但将其应用于整个文档而不是元素。

我不会建议第二个，因为它可能会破坏可访问性用户的功能。

Answer 4

function PreventEnterKeyInTextBox(){
$('#txtInput').keypress(function(evt){evt=(evt)?evt:window.event; 
if(evt.keyCode==13){
    if($.browser.msie)
         {evt.cancelBubble=true; evt.returnValue=false;}
    else{evt.preventDefault();}
 }});
}
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PreventEnterKeyInTextBox);
//Or $(document).ready(function(){PreventEnterKeyInTextBox();});

阻止与jquery绑定的函数的回发

4 个答案: