CODEWITHSUNDEEP
javascriptjquery
Sid Chase
Sid Chase

Reputation: 27

How to make a keypress trigger a link

I am trying to make code where a button press will activate a a href link. This is the code I have.

HTML :

<a id="#next" href="talonbragg.com">↵</a>
<a id="#previous" href="talonbragg.com">↳</a>

JS :

$(document).ready(function() {
    document.onkeydown = function() 
    {
        var j = event.keyIdentifier
        if (j == "Right")
            window.location = nextUrl
        else if (j == "Left")
            window.location = prevUrl            
    }
});

$(document).ready(function() {
    var nextPage = $("#next")
    var prevPage = $("#previous")
    nextUrl = nextPage.attr("href")
    prevUrl = prevPage.attr("href")
});

Can someone please help?

Upvotes: 1

Views: 5176

Answers (4)

shorty mc
shorty mc

Reputation: 41

document.onkeydown = checkKey;

function checkKey(e) {
    e = e || window.event;

    if (e.keyCode == '27') {
        window.open("https://www.tradezone.fr", target="_self");
    }
    else if (e.keyCode == '121') {
        window.open("https://www.tradezone.tv", target="_self");
    }
}

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

First of all DON'T USE keyIdentifier it's a 'Non-standard' AND 'Deprecated' property.

Since you're using jQuery you could use e.keyCode || e.which in the on keydown event like :

$('body').on('keydown', function(e){
    var code = e.keyCode || e.which;

    if(code==39)
      $('#next').click();
    else if(code==37)
      $('#previous').click();
})

And simply click the related anchor.

NOTE : You should remove the # from your id's, so it will be like :

<a id="next" href="talonbragg.com">↵</a>
<a id="previous" href="talonbragg.com">↳</a>

Hope this helps.

$(document).ready(function() {
  $('body').on('keydown', function(e){
    var code = e.keyCode || e.which;

    if(code==39){
      $('#next').click();
    }else if(code==37){
      $('#previous').click();
    }
  })

  //This part just for debug purpose
  $('a').on('click', function(e){
    e.preventDefault();

    console.log($(this).attr('id')+' Clicked');
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="next" href="talonbragg.com">↵</a>
<a id="previous" href="talonbragg.com">↳</a>

Upvotes: 1

Nutshell
Nutshell

Reputation: 8537

Here's another way to do it. You can find key codes in the link @BestBudds provide.

I've updated your code like this :

$(document).keydown(function(e) {
  switch (e.which) {
    case 37: // left
      var href = $('#previous').attr('href');
      window.location.href = href;
      break;

    case 39: // right
      var href = $('#next').attr('href');
      window.location.href = href;
      break;
  }
  e.preventDefault(); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="#next" href="http://google.com">↵</a>
<a id="#previous" href="http://stackoverflow.com">↳</a>

Upvotes: 2

BestBudds
BestBudds

Reputation: 13

I would do it different way:

$('body').keypress(function(event) {
                var nextUrl = $('#next').attr('href');
                var previousUrl = $('#previous').attr('href');
                var key = (event.keyCode ? event.keyCode : event.which);
                var left = 37;
                var right = 39;
                if (key == left) {
                     window.location = previousUrl;
                }else if(key == right){
                     window.location = nextUrl;
                }else{return false;}

            });

Now this is saying on keypress when is body focused of your website the event will find keycode from pressed key from keyboard.

You can find key codes here

After that you just need to do something if correct key was pressed.

Upvotes: 0

Related Questions