onkeypress on a <a> tag

Question

I'm trying get my <a> tag triggered when the user press on the "enter" key. (onkeypress).

my <a> tag:

<a href="javascript:search()" onkeypress="return runScript(event)">

this is my javascript :

 function runScript(e)
   {
        if (e.keyCode == 13) {
                alert("dssd");
        return false;

      }
   }

I dont know whats messed up ?

Fiedling

hiya, quick suggestion: whats that href which javascript in it? try it without href please. hope this helps - w3schools.com/jsref/event_onkeypress.asp ; can you also try putting alert or debugger to see if your run script is getting invoked, if you JSFiddle it I can see how we can knock this thing down. cheers – Zambia

if I comment the "href" its still wont work.. – Fiedling

sorry man - i meant put # instead of javascript search - but seems you got it working. – Zambia

Why are you using an A element at all? They're meant to be anchors or links, not buttons. – Alkylation

Answer 1

its work for me

 <a href="javascript:search();"  onkeypress="return runScript(event);">Open in new window using javascript</a>

javaScript

 window.runScript = function (e) {

       if (e.keyCode == 13) {
           alert('ss');
           return false;
       }
       else {

           return true;
       }
   }

   window.search = function () {
       alert('s');
   }

live demo : fiddle

Rappee

Answer 2

Write your html as given below. Note the property tabindex which makes the a tag focusable in certain browsers.

<a id="link" href="http://google.com" onkeydown="runScript(event)" tabindex="1">I am a link</a>

If you need an autofocus on load, you can use the jQuery function focus as shown below.

$(document).ready(
    function(e){
        $("#link").focus();
    }
);

Then your function

function runScript(e){
    if(e.keyCode == 13){
       alert("pressed enter key");
    }
}

you have to call e.preventDefault(); (or return false in some browsers) if you want to prevent the link load the link in href.

function runScript(e){
    e.preventDefault();
    if(e.keyCode == 13){
       alert("pressed enter key");
    }
    return false;
}

see a demo here: http://jsfiddle.net/diode/hfJSn/9/show press enter key when the page is loaded

Nepil

Minor note: I believe you meant to suggest setting a tabindex of 0, not 1. Zero will ensure the element is both tabbable and focusable, -1 will make it focusable but not tabbable, and any number over 0 declares an explicit position in the tab sequence, which is rarely desireable. – Sacking

Answer 3

The ENTER key actually triggers the onclick event:

<a href="#" onclick="alert('hello!');">

This means that your search() function inside the href will execute before the onkeypress event.

Frogman

Answer 4

That works in my browser, though I suspect it's not the way to achieve what you actually want to do... (maybe?)

Number one, you probably don't want it to "return" anything, so you can just do onkeypress="runScript(e)" and it'll run. If that function does return a value, it's not gonna go anywhere...

Number two, it's kinda rare that a keydown event would fire on an anchor (<a>) element, unless of course the user tabs through the other elements 'till it has focus and then presses a key (usually the browser will "highlight" the element that currently has keyboard focus, if it's not just the whole page). Are you wanting your script to run when someone presses enter after typing in a search box or something? if so, you probably want to listen for the event on the search box itself, so add it as that element's onkeydown attribute (for example: <input id="mySearchBox" onkeydown="runScript(e)">) if you just want it to run whenever the user presses enter, regardless of focus or typing text into any particular field, just do as edmastermind29's comment said and add the event listener to the whole document.

Coenurus

Answer 5

Have you tried adding this to your script?

document.onkeypress = runScript;

Hypoploid