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

Question

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

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

Answer 1

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

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");
   }
});

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

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

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>

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

Choose option on Confirm using Arrow Key on Keyboard

javascript

bootbox

jQuery 插件