Question

I am using a small script that triggers the next/previous links on the page when an arrow key is pressed. I am trying to prevent this from happening when a user is typing in my search input form (maybe they spelled their query wrong and want to use the arrow keys to fix).

Here is what I’m working with:

var $j = jQuery.noConflict();

$j(function(){
    $j('.n').click(function() {
        location.href = $j(this).attr('href')
    });
    $j('.p').click(function(){
        location.href = $j(this).attr('href')
    });
});

$j(':not(input)').keydown(function(event) {
    if(event.keyCode==39) {
        $j('.n').trigger('click')
    }
    if(event.keyCode==37) {
        $j('.p').trigger('click')
    }
});

And the HTML is basically just a form with an input field. The trigger still goes even when the cursor is in the input. I’m not sure what I’m doing wrong. Any help is much appreciated!

Answer 1

the event is bubbling up from the input through the rest of the document.

In your event try logging out event.trigger :

$j(':not(input)').keydown(function(event) {
  console.log(event.trigger);
  // REST OF FN

I bet it’s not an HTMLInputElement

One solution, try binding on inputs and stopping the event propagation :

$j('input').keydown(function(event) {
  event.stopPropagation();
});

See if that helps.