1

テキストエリアを表示するだけの非常に最小限でシンプルなモーダルダイアログを作成しようとしています。

目標：

  • ユーザーが「esc」キーを押すと、それは消えます（そしてテキスト入力は無視されます）
  • ユーザーがテキストを入力して「Enter」キーを押すと、入力を受け取る関数が実行されます（「postText（userinput）」と呼ばれます）。

jQuery BlockUIを使用できるかどうか疑問に思っています：http：//malsup.com/jquery/block/#demos。

ただし、escに基づいて実際にダイアログを閉じる方法や、ユーザーがEnterキーを押した場合に関数を実行する方法がわかりません。

どんな助けでも大歓迎です！

4

3 に答える 3

4

のダイアログを閉じます。リスナーをESC追加して、キー コードが と等しい場合に呼び出します。keyupdocument$.unblockUI27

​​$(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') });
    });
});
于 2012-07-30T12:11:10.663 に答える
1

JavaScript:

("#yourInput").keyup(function(e){
    switch (e.keyCode) {
    case 13: # enter
    # logic
    case 27: # esc
    # logic
    }
})
于 2012-07-30T12:12:58.510 に答える