jQuery BlockUI：用戶點擊「輸入」鍵後可以運行一個函數嗎？

Question

我試圖創建一個非常簡單的模態對話框，只顯示一個textarea。

目標：

• 如果用戶點擊「ESC」鍵，它會消失（和文字輸入被忽略）
• 如果用戶輸入文本並點擊了「確認」鍵，運行輸入的函數（稱爲「postText（userinput）」）

我在想我是否可以使用jQuery BlockUI：http://malsup.com/jquery/block/#demos。

但是，我不確定如何實際關閉基於esc的對話框，或者如果用戶點擊輸入運行函數。

任何幫助將不勝感激！

Answer 1

嘗試這樣的事情;

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

    if (e.keyCode === 13) { 
     // The Enter key was pressed 
     postText($(this).val()); 
    } 
}); 

你應該怎麼過，而不是使用偵聽enter鍵form.submit事件。

if (e.keyCode === 27) { 
    // The Esc key was pressed 
    $('#dialog').hide(); 
} 

另請參閱這些瞭解更多信息;

https://stackoverflow.com/search?q=javascript+esc+key

https://stackoverflow.com/search?q=javascript+enter+key

Answer 2

上ESC關閉對話框，只需添加一個keyup偵聽器document並調用$.unblockUI如果鍵碼等於27。

​​$(document).on('keyup', ​​​function(e) { 
    if (e.which === 27) { // Escape key 
    $.unblockUI(); 
    } 
});​ 

對於表格，只需添加一個事件偵聽器輸入字段在對話框中。它基本上是一樣的。

​​$('#the-input').on('keyup', ​​​function(e) { 
    if (e.which === 13) { // Enter key 
    // AJAX maybe? 
    $.post('your/url', { data: $(this).val() }, function(response) { 
     $.unblockUI();    
    }); 
    } 
});​ 

編輯

您的DOM加載後分配這些聽衆。所以，你的加載腳本文件將包含：

$(document).ready(function() { 
    // Code from the two listings above here 

    // Trigger blockUI by click on an link for example 
    $('a').on('click', function(e) { 
     e.preventDefault(); 

     $.blockUI({ message: $('#your-form') }); 
    }); 
}); 

Answer 3

的javascript：

("#yourInput").keyup(function(e){ 
    switch (e.keyCode) { 
    case 13: # enter 
    # logic 
    case 27: # esc 
    # logic 
    } 
})