javascript - How can I fire an <a href> with enter key press? - Stack Overflow

admin管理员组

文章数量:1277380

So, I need to fix a bug: Whenever you hit "enter" key; the form doesn't submit. Basically the cause is because the element that trigger form submit is an href... I tried making it a submit but then the css fails so I was wondering if there is a way to make it submit with enter key?

Here is the code:

        <div class="login-form-bg">
        <form name="login_form" id="login_form" method="post">
            <table>
                <tr>
                    <td>{translate id='Game'}Login:{/translate}</td>
                    <td><input type="text" name="ss_users_pseudo" /></td>
                </tr>
                <tr>
                    <td>{translate id='Game'}Password:{/translate}</td>
                    <td><input type="password" name="ss_users_password" /></td>
                </tr>
                <tr height="30px">
                    <td>&nbsp;</td>
                    <td>
                    <fb:login-button perms="email" id="facebook-login-button"></fb:login-button>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td class="checkbox"><label for="request_password">{translate id='Game'}<a href="forgotPassword.php">Request password</a>{/translate}</label></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td class="checkbox">{translate id='Game'}Remember me{/translate} <input type="checkbox" name="ss_users_remenber_me" value="1" /></td>
                </tr>

            </table>
                <a href="#" onclick="document.login_form.submit(); return false;" name="connect" id="connect">
                    <div class="button-action login-button-div">
                        <span><span><span>
                            {translate id='Game'}Login{/translate}
                        </span></span></span>
                    </div>
                </a>
        </form>

So, I need to fix a bug: Whenever you hit "enter" key; the form doesn't submit. Basically the cause is because the element that trigger form submit is an href... I tried making it a submit but then the css fails so I was wondering if there is a way to make it submit with enter key?

Here is the code:

        <div class="login-form-bg">
        <form name="login_form" id="login_form" method="post">
            <table>
                <tr>
                    <td>{translate id='Game'}Login:{/translate}</td>
                    <td><input type="text" name="ss_users_pseudo" /></td>
                </tr>
                <tr>
                    <td>{translate id='Game'}Password:{/translate}</td>
                    <td><input type="password" name="ss_users_password" /></td>
                </tr>
                <tr height="30px">
                    <td>&nbsp;</td>
                    <td>
                    <fb:login-button perms="email" id="facebook-login-button"></fb:login-button>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td class="checkbox"><label for="request_password">{translate id='Game'}<a href="forgotPassword.php">Request password</a>{/translate}</label></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td class="checkbox">{translate id='Game'}Remember me{/translate} <input type="checkbox" name="ss_users_remenber_me" value="1" /></td>
                </tr>

            </table>
                <a href="#" onclick="document.login_form.submit(); return false;" name="connect" id="connect">
                    <div class="button-action login-button-div">
                        <span><span><span>
                            {translate id='Game'}Login{/translate}
                        </span></span></span>
                    </div>
                </a>
        </form>

• javascript
• forms
• submit

Share Improve this question Follow edited Mar 15, 2011 at 17:37 skaffman 404k9696 gold badges824824 silver badges775775 bronze badges asked Mar 15, 2011 at 17:35 AveAve 28222 gold badges44 silver badges99 bronze badges 4

• 4 you can style a button. I think going that route would be less code and less of a hassle then creating click functionality with javascript. – The Muffin Man Commented Mar 15, 2011 at 17:40
• @Nick: Indeed, and this would improve accessibility as well. Forms expect buttons. – David Commented Mar 15, 2011 at 17:42
• Yeah i would imagine thats the correct way, but I just need to fix the bug not remake it, I wouldnt kow where to start. – Ave Commented Mar 15, 2011 at 17:43
• The preferred form on a javascript-only link is: <a href="javascript://" onclick="document.login_form.submit();" name="connect" id="connect"> this way to don't need "return false". – Diodeus - James MacFarlane Commented Mar 15, 2011 at 17:44

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

Actually, I found a way to fix it... all I had to do is make a submit with display:none and visible:false; and no value to make the enter work.... I know it's weird, but I'm here to fix bugs not redesign the code :(

Here's a jQuery answer. But you get the idea.

This will detect the enter key being pressed from within any input in the form and it will trigger the form's submit() method

$("#login_form input").keypress(function(e) {
  if (e.keyCode == 13) {
    $(this).closest("form").submit();
  }
});

Have you tried on the onkeyup for the textbox:

if (event.keyCode == 13) { document.getElementById("connect").click(); }

I think that should work. Haven't tested it.

Tough the right approach would be to make it a submit button and change CSS accordingly (you can make a submit button look like a link), You could register a javascript event that changes document.location or submits a form with form.submit()

well i think i got you in 2 ways

1- you need when the focus is on the href

2- you need when the focus is on the document all

well if you need it on the focus of the a href

function hrefKeyDown(evt)
{
var ev = ((window.event)?(window.event):(evt));
var ahref = ((window.event)?(window.event.srcElement):(evt.currentTarget));
var charCode = ((window.event)?(window.event.keyCode):(((evt.which)?(evt.which):(evt.keyKode))));
if(charCode==13)
{
ahref.click();
}
}

        <a href="#" onclick="document.login_form.submit(); return false;" name="connect" id="connect" onkeydown = "hrefKeyDown(event);return false;">

and if its on the document when ever you press enter click the a href

function hrefKeyDown(evt)
 { 
var ev = ((window.event)?(window.event):(evt)); 
var ahref = document.getElementById('connect');
var charCode = ((window.event)?(window.event.keyCode):(((evt.which)?(evt.which):(evt.keyKode))));
if(charCode==13) 
{ 
ahref.click();
} 
}

<body onkeydown="hrefKeyDown(event);return false;">

sorry for the first post iam new here i hope i can help :)

本文标签： javascriptHow can I fire an lta hrefgt with enter key pressStack Overflow