Disable backspace browser functionality and use to clear text in div instead

Question

Context: I am creating a "faux command line" website. You type in commands at a faux prompt within a div.

Problem: What if you mistype and need to backspace a character or two?? Upon hitting backspace my browser goes back to the previous webpage.

My Half Solution: Disable the backspace functionality in the browser by detecting the key. I'm doing this by detecting the 'keydown' event for backspace and returning false. But now that the browser functionality has been blocked (return false), the event is over. I cannot call a following function to the event that will perform the backspace functionality I'm trying to create.

My Question: How do you block the functionality, but then continue the event and call a function to do what I want (an alert, a function call, etc.)?

Please go to my CodePen to see full code. But here is a snippet:

   $(document).keydown(function(e) {
  if (e.keyCode == 8) {
    return false;
  **//I need to call a function here!!!!!!**
  } else {
  prompt.keyDetector(e);
  }
});

My Faux Command Line Link

Answer 1

You can use e.preventDefault() to prevent default actions of events.

$(document).keydown(function(e) {
  if (e.keyCode == 8) {
    e.preventDefault();
    //call function
    return false;
  } else {
  prompt.keyDetector(e);
  }
});