使用键盘上的箭头键选择确认选项

Question

bootbox上是否有选项可以使用键盘上的左箭头键在确认对话框中选择取消？目前，默认选择的选项是OK。但我们的用户想要使用左右箭头键选择选项，就像他们想要使用左键选择取消选项一样。

我检查了文档，但找不到类似的选项来执行此功能。

Answer 1

您可以添加事件侦听器并捕捉左右箭头

＆＃13;

＆＃13;

document.addEventListener("keydown", function(e){
   if(e.which == 37){
     alert("Leff arrow");
     // here you could write your logic
   }
   if(e.which == 39){
    alert("right arrow");
   }
});

＆＃13;

<p>Press Left or Right arrows</p>

＆＃13;

＆＃13;

＆＃13;

按向左或向右箭头检查此代码

Answer 2

您可以编写一个jQuery函数来处理这个问题。只需在文档中添加一个关键监听器即可。

当您点击左箭头键或右箭头键时，确定您要移动的方式，检索当前所选按钮并相应移动。

const KEYBOARD_ARROW_LEFT  = 37;
const KEYBOARD_ARROW_RIGHT = 39;

bootbox.confirm("This is the default confirm!", function(result) {
  console.log('This was logged in the callback: ' + result);
});

$(document).on('keyup', handleOnKeyUp);


function getModalBootBoxButtons() {
  return $('.bootbox.modal .modal-dialog .modal-content .modal-footer button');
}

function moveInDirection(children, amount) {
  var focusIndex = -1;
  children.each(function(index, child) {
    if ($(child).is(":focus")) focusIndex = index;
  });
  var newFocusIndex = focusIndex + amount;
  if (newFocusIndex > -1 && newFocusIndex < children.length) {
    $(children[newFocusIndex]).focus();
  }
}

function handleOnKeyUp(e) {
  e = e || window.event;
  switch (e.keyCode) {
    case KEYBOARD_ARROW_LEFT:
      moveInDirection(getModalBootBoxButtons(), -1);
      break;
    case KEYBOARD_ARROW_RIGHT:
      moveInDirection(getModalBootBoxButtons(), +1);
      break;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.js"></script>

jQuery插件

(function($) {
  $.fn.bootboxModalKeyFocus = function(bootboxClass) {
    bootboxClass = bootboxClass || '.bootbox.modal .modal-dialog';
    var moveInDirection = function(children, amount) {
      var focusIndex = -1;
      children.each(function(index, child) {
        if ($(child).is(":focus")) focusIndex = index;
      });
      var newFocusIndex = focusIndex + amount;
      if (newFocusIndex > -1 && newFocusIndex < children.length) {
        $(children[newFocusIndex]).focus();
      }
    }
    return this.on('keyup', function(e) {
      if ($(bootboxClass).is(":visible")) { // Ignore when hidden
        e = e || window.event;
        switch (e.keyCode) {
          case 37: // Left arrow
            moveInDirection($(bootboxClass).find('.modal-footer button'), -1);
            break;
          case 39: // Right arrow
            moveInDirection($(bootboxClass).find('.modal-footer button'), +1);
            break;
        }
      }
    });
  };
})(jQuery);

bootbox.confirm("This is the default confirm!", function(result) {
  console.log('This was logged in the callback: ' + result);
});

$(document).bootboxModalKeyFocus(); // Add the listener

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.js"></script>