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

Question

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

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

Answer 1

您可以编写一个 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>