防止與jQuery綁定的函數回發

Question

當焦點在特定文本框上時，按“ Enter”鍵時，我正在嘗試運行一些javascript代碼。 如果發生這種情況，我不希望頁面回發。 （但是，如果有人單擊 “提交”按鈕，那么我希望頁面像往常一樣回發。）

我有一個頁面，其中包含以下內容：

<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

您需要使用keypress事件，因為它發生在釋放鍵之前，因此可以將其取消。

引用評論：

可能是由於keyup事件。 從理論上講，密鑰已經確定，因此事件已經發生。 您是否嘗試過按鍵操作 ？

Answer 2

剛剛進行了測試，它僅與keydown事件一起使用，釋放密鑰時為時已晚：

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

小提琴

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）看一下這個問題： 取消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();});