Disable keydown event defined by javascript in textarea and restore default behavior

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

Blake Regalia · Accepted Answer · 2012-09-02 01:27:25Z

5

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

answered Sep 2, 2012 at 1:27

Blake Regalia

2,7662 gold badges22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arturs Lapins · Accepted Answer · 2012-09-02 01:38:34Z

-1

You can do this:

$(document).keydown(function(e){
 if(!$('#textarea').is(':focus')){
    yourfunction();
    }
});

You just simply add an if statement inside and if the textarea is not focused then you call the function.

answered Sep 2, 2012 at 1:38

Arturs Lapins

91 bronze badge

2 Comments

nnnnnn Over a year ago

OP isn't trying to call a function, he or she wants to prevent a reveal.js event handler from running - or are you suggesting that the reveal.js code be modified the way you've shown?

Kevin Over a year ago

much cleaner IMO, when putting this inside the reveal.js code - keeps everything effecting it in one place

Collectives™ on Stack Overflow

Disable keydown event defined by javascript in textarea and restore default behavior

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related