Question

I am using reveal.js by Hakim El Hattab to make presentation slides. I have added textarea to a slide. Within the textarea I want to prevent javascript functions from being called when certain keys are pressed, and restore the default behavior of typing. For example, as you can see from the lines of code below from reveal.js, when p is pressed, a function navigatePrev() is called. I want to prevent this function from being called and simply want p to be typed in the textarea when p is pressed. How can I do this using jquery? I tried adding the following script but that does not help.

<script>
  $(document).keydown(function (e) {
    if ($(e.target).is('textarea')) {
      e.stopPropagation();
    }
  })
</script>

The functions defined in the reveal.js are still called. Using return false in place of e.stopPropagation() does not help either. I am also including the above jQuery lines at the very end on my page (after reveal.js is called).

Thank you.

Relevant lines from reveal.js

function onDocumentKeyDown(event) {
  // FFT: Use document.querySelector( ':focus' ) === null 
  // instead of checking contentEditable?

  // Disregard the event if the target is editable or a 
  // modifier is present
  if (event.target.contentEditable != 'inherit' || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) return;

  var triggered = false;

  switch (event.keyCode) {
    // p, page up
    case 80: case 33: navigatePrev(); triggered = true; break;
    // n, page down
    case 78: case 34: navigateNext(); triggered = true; break;
    // h, left
    case 72: case 37: navigateLeft(); triggered = true; break;
    // l, right
    case 76: case 39: navigateRight(); triggered = true; break;
    // k, up
    case 75: case 38: navigateUp(); triggered = true; break;
    // j, down
    case 74: case 40: navigateDown(); triggered = true; break;
    // home
    case 36: navigateTo(0); triggered = true; break;
    // end
    case 35: navigateTo(Number.MAX_VALUE); triggered = true; break;
    // space
    case 32: overviewIsActive() ? deactivateOverview() : navigateNext(); triggered = true; break;
    // return
    case 13: if (overviewIsActive()) { deactivateOverview(); triggered = true; } break;
  }
}

Answer 1

The problem with your keydown event binding is that it binds to the document, which receives the event LAST (once it’s too late to prevent the event from bubbling further up the DOM tree).

Instead, try binding the event directly to the textarea every time it is created:

// create text area & append to slide container
createTextAreaOnSlideContainer();

// bind an event handler to the element
$('textarea.slideTextArea').keydown( function(e) {
    e.stopPropagation();
});

This will stop the event before it bubbles (propagates) up to the document that is listening for a key to be pressed