如何通过回车键确认 - Remodal

Question

我一直在使用remodal 进行确认和通知弹出窗口。我没有这样做是允许输入密钥提交。我尝试寻找解决方案，但似乎网络上没有，并且开发人员似乎在解决 enter key issue 之前放弃了他的工作。

我尝试使用 javascript switch-case 代码，但同样，如果用户决定在按下回车键之前单击响应性内容，这会产生更改焦点的问题，此外，这种方法非常耗时。

我转过这3条线索：

线索1：当一个remodal窗口打开时，div的data-remodal-id属性成为窗口位置。示例 = ../mypage.php#myremodal

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

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

我正在尝试找到一种方法，可以在当前打开的 remodal 的确认按钮上简单地模拟 .click()。正如我所说，我尝试了switch(from){}inside 打开的remodal 部分并分配了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）

您可以在此处查看 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 键时，打开的模式将以“确认”的原因关闭。

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

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

这通过侦听模态 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();
    }
  });
});