Choose option on Confirm using Arrow Key on Keyboard

Question

Is there an option on bootbox to choose Cancel on confirm dialog box using left arrow key on keyboard? Currently the default selected option is OK. But our user wants to select the option using left and right arrow key like they want to choose Cancel option using left key.

I've checked the documentation and I cannot find similar option to do this functionality.

Possible duplicate of [Detecting arrow key presses in JavaScript](https://stackoverflow.com/questions/5597060/detecting-arrow-key-presses-in-javascript) — Mr. Polywhirl, Apr 11 '18 at 12:49

score 1 · Answer 1 · answered Apr 11 '18 at 12:53

1

You can add event listeners and catch left and right arrows

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>

Press Left or Right arrow to check this code

answered Apr 11 '18 at 12:53

Dinesh undefined

5,490
2
19
40

This works, but it can only detect keypress, but the selected option is not moving on bootbox dialog box. But thanks this helps as well! – Willy David Jr Apr 11 '18 at 13:15

Mr. Polywhirl · Accepted Answer · 2018-04-11T13:20:58.093

You could write a jQuery function to handle this. Just add a key listener to the document.

When you hit the left or right arrow key, determine which way you are moving, retrieve the current selected button and move accordingly.

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 Plugin

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

Check the jQuery plugin, it will check if the window is visible: `$(bootboxClass).is(":visible")` — Mr. Polywhirl, Apr 11 '18 at 13:21

Choose option on Confirm using Arrow Key on Keyboard

2 Answers2

jQuery Plugin