Enterキーで確認する方法 - Remodal

Question

確認と通知のポップアップにはremodalを使用しています。私がそうしなければ、キーを入力することができます。私は解決策を探そうとしましたが、Web上に何もないようで、開発者はenter key issueが解決される前に彼の仕事を放棄したようです。

javascript switch-caseコードを使用しようとしましたが、ユーザーがEnterキーを押す前に何かをクリックするとフォーカスが変わるという問題が発生します。また、このメソッドは非常に時間がかかることがわかります。

私は、これらの3つの手がかりを好転：

手掛かり1：remodalウィンドウが開かれると、DIVのdata-remodal-id属性は、ウィンドウの位置となります。例= ../mypage.php#myremodal

手がかり2：data-remodal-action="confirm"

手掛かり3：確認ボタンは、この属性を持つRemodalウィンドウがページのzインデックスの前に置かれています。

現在開かれているリモダールの確認ボタンで.click()をシミュレートする方法を探しています。私が言ったように、私はswitch(from){}を開いて改装セクションに入れて、どちらのモーダルが確認されたかを選択するためにfrom = $(e.currentTarget).attr("data-remodal-id");を割り当てましたが、これは構造のために他の問題を生み出し、

これはremodalアクションがスクリプトで制御されている方法です。

$(document).on('opening', '.remodal', function() { 
 
    console.log('Modal is opening'); 
 
}); 
 

 
$(document).on('opened', '.remodal', function() { 
 
    //************************************************** 
 
    //THIS IS WHERE I WANT TO PUT ENTER KEY CONFIRMATION 
 
    //************************************************** 
 
    console.log('Modal is opened'); 
 
}); 
 

 
$(document).on('closing', '.remodal', function(e) { 
 

 
    // Reason: 'confirmation', 'cancellation' 
 
    console.log('Modal is closing' + (e.reason ? ', reason: ' + e.reason : '')); 
 
}); 
 

 
$(document).on('closed', '.remodal', function(e) { 
 

 
    // Reason: 'confirmation', 'cancellation' 
 
    console.log('Modal is closed' + (e.reason ? ', reason: ' + e.reason : '')); 
 
}); 
 

 
$(document).on('confirmation', '.remodal', function() { 
 
    console.log('Confirmation button is clicked'); 
 
    
 
from = window.location.hash.substr(1) 
 
      
 
switch (from){ 
 

 
case "1": 
 
//********************* 
 
// MY JSON ACTIONS HERE 
 
//********************* 
 
break; 
 

 
case "2": 
 
//********************* 
 
// MY JSON ACTIONS HERE 
 
//********************* 
 
break; 
 
    
 

 
} 
 
}); 
 

 
$(document).on('cancellation', '.remodal', function() { 
 
    console.log('Cancel button is clicked'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.1/remodal.min.js"></script> 
 

 

 

 
<div class="remodal" data-remodal-id="myremodal"> 
 
    <button data-remodal-action="close" class="remodal-close"></button> 
 
    
 
    <p> 
 
    some text 
 
    </p> 
 
    <br> 
 
    <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button> 
 
    <button data-remodal-action="confirm" class="remodal-confirm">OK</button> 
 
</div> 
 

 
<a data-remodal-target="myremodal">call the modal</a>

Answer 1

代わりのRemodalライブラリにパッチを適用しませなぜあなたはクリーナー解を得るように、この機能を追加する外部の方法を実装しようと？

興味深い部分はここにある：私達はに変換することができますhttps://github.com/vodkabears/Remodal/blob/1.1.1/src/remodal.js#L766-L771

// Handles the keydown event 
$(document).on('keydown.' + NAMESPACE, function(e) { 
    if (current && current.settings.closeOnEscape && current.state === STATES.OPENED && e.keyCode === 27) { 
    current.close(); 
    } 
}); 

：

// Handles the keydown event 
$(document).on('keydown.' + NAMESPACE, function(e) { 
    if (current && current.state === STATES.OPENED) { 
    if (current.settings.closeOnEscape && e.keyCode === 27) { 
     current.close(); 
    } else if (current.settings.confirmOnEnter && e.keyCode === 13) { 
     current.close(STATE_CHANGE_REASONS.CONFIRMATION); 
    } 
    } 
}); 

（およびconfirmOnEnterオプションthereを追加）

あなたはのパッチを当てたバージョンを見ることができますここの修理：https://github.com/ghybs/Remodal/blob/6942ef830e621a4de079e2b28a4aa02d3c2607a5/src/remodal.js

そしてそれを使用してください。 RawGit CDNを使用して：

<script src="https://cdn.rawgit.com/ghybs/Remodal/6942ef830e621a4de079e2b28a4aa02d3c2607a5/src/remodal.js"></script> 

は今、あなたは新しいオプション "confirmOnEnter" へのアクセス権を持っています。単にtrueに設定すると、ユーザーがキーを押したときに、開いているモーダルが「確認」の理由で閉じられます。

$(document).on('opening', '.remodal', function() { 
 
    console.log('Modal is opening'); 
 
}); 
 

 
$(document).on('opened', '.remodal', function() { 
 
    //************************************************** 
 
    //THIS IS WHERE I WANT TO PUT ENTER KEY CONFIRMATION 
 
    //************************************************** 
 
    // => instead use the new "confirmOnEnter" option in modal configuration. 
 
    console.log('Modal is opened'); 
 
}); 
 

 
$(document).on('closing', '.remodal', function(e) { 
 

 
    // Reason: 'confirmation', 'cancellation' 
 
    console.log('Modal is closing' + (e.reason ? ', reason: ' + e.reason : '')); 
 
}); 
 

 
$(document).on('closed', '.remodal', function(e) { 
 

 
    // Reason: 'confirmation', 'cancellation' 
 
    console.log('Modal is closed' + (e.reason ? ', reason: ' + e.reason : '')); 
 
}); 
 

 
$(document).on('confirmation', '.remodal', function() { 
 
    console.log('Confirmation button is clicked'); 
 
    
 
from = window.location.hash.substr(1) 
 
      
 
switch (from){ 
 

 
case "1": 
 
//********************* 
 
// MY JSON ACTIONS HERE 
 
//********************* 
 
break; 
 

 
case "2": 
 
//********************* 
 
// MY JSON ACTIONS HERE 
 
//********************* 
 
break; 
 
    
 

 
} 
 
}); 
 

 
$(document).on('cancellation', '.remodal', function() { 
 
    console.log('Cancel button is clicked'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.rawgit.com/ghybs/Remodal/6942ef830e621a4de079e2b28a4aa02d3c2607a5/src/remodal.js"></script> 
 

 

 

 
<div class="remodal" data-remodal-id="myremodal" data-remodal-options="confirmOnEnter: true"> 
 
    <button data-remodal-action="close" class="remodal-close"></button> 
 
    
 
    <p> 
 
    some text 
 
    </p> 
 
    <br> 
 
    <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button> 
 
    <button data-remodal-action="confirm" class="remodal-confirm">OK</button> 
 
</div> 
 

 
<a data-remodal-target="myremodal">call the modal</a>

Answer 2

だから私が正しくあなたを理解していれば、私はときに、ユーザーのヒット（OKをクリックするのと同じ）モーダル確認を行いましたモーダルが開いているときにEnterキーを押します。開かれたイベントの下のコードを使って試すことができます

これはモーダル部門の中で押されたキー（キーダウンイベント）を聞いて動作します。次に、それらのキーの1つがエンターキーである場合、それは自動的に確認ボタンをクリックします。

$(document).on('opened', '.remodal', function() { 
    $("div[data-remodal-id='myremodal']").on('keydown', function(e) { 
    if (e.which == 13) { 
     $("button[data-remodal-action='confirm']").click(); 
    } 
    }); 
});