如何通过回车键确认 - Remodal

Question

我一直在用remodal for confirmation and notification pop-ups. What I fail to do so is allowing enter key submission. I tried searching for a solution, but it seems there are none on the web and the developer seems to be abandoned his work before the enter key issue已解决。

我尝试使用 javascript switch-case 代码，但是如果用户决定在按下 enter 键之前点击一些响应式的东西，这又会产生一个改变焦点的问题，此外，这个方法被证明是非常费时。

我转过这3条线索：

线索 1：当打开重模 window 时，div 的 data-remodal-id 属性变为 window 位置。示例 = ../mypage.php#myremodal

线索 2：确认按钮具有此属性：data-remodal-action="confirm"

线索 3：Remodal window 放在页面 z-index 的前面。

我正在尝试找到一种方法来简单地模拟 .click() 当前打开的 remodal 的确认按钮。正如我所说，我尝试 switch(from){} 在打开的重模部分中并分配 from = $(e.currentTarget).attr("data-remodal-id"); 以便 select 确认哪个模态，但是由于结构和所有确认都非常耗时，这会产生其他问题申请。

这是在脚本中控制重塑动作的方式：

$(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

因此，如果我理解正确的话，当用户在模态打开时按下回车键时，我进行了模态确认（与单击“确定”相同）。您可以尝试使用以下代码打开事件

这通过侦听模态 div 内按下的键（按下事件）来实现。然后，如果这些键之一是回车键，它将自动单击确认按钮。

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

Answer 2

与其尝试通过外部方式来添加此功能，不如修补 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）

您可以在此处查看 Remodal 的补丁版本：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，当用户按下 Enter 键时，打开的模式将以 "confirmation" 原因关闭。

$(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>

如何通过回车键确认 - Remodal

How to confirm by enter key - Remodal

javascript

html

remodal