javascript - 如何通过输入键确认-重塑

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

我尝试使用javascript大小写转换代码，但是如果用户决定在按下Enter键之前单击响应的内容，则会再次产生焦点更改问题，此外，这种方法非常耗时。

我扭转了这三个线索：

线索1：打开重新调整模式的窗口时，div的data-remodal-id属性成为窗口位置。示例= ../mypage.php#myremodal

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

提示3：“重模式”窗口位于页面z-index的前面。

我试图找到一种方法，可以简单地模拟当前打开的重模版的确认按钮上的.click()。正如我所说，我尝试在打开的重模式部分中使用switch(from){}并分配了from = $(e.currentTarget).attr("data-remodal-id");以便选择要确认的模式，但这会由于结构和应用所有确认所花费的时间而造成其他问题。

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

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

最佳答案

与其尝试实现一种外部方式来添加此功能，不如修补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>

关于javascript - 如何通过输入键确认-重塑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46984454/