Send form when hitting enter_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-25 16:42 出处：网络

I have a form in a jQuery enabled site. The form does not feature an <input type=\"submit\"> button. For that reason, it\'s not submitted when you hit enter. What\'s the recommended way to emula

I have a form in a jQuery enabled site. The form does not feature an <input type="submit"> button. For that reason, it's not submitted when you hit enter. What's the recommended way to emulate such behaviour?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 开发者_如何学GoTransitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head><title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"><!--
$(function(){
    $("form input:first").focus();
});
//--></script>
</head>
<body>

<form action="" method="post">
<input type="text" name="user">
<input type="password" name="pass">
</form>

</body>
</html>

Update

I'm just trying to add a quick simple improvement to an existing form. I fully understand all the concerns about accessibility but the app itself needs JavaScript and will not run at all without it. A fallback to submit the form would be of little use.

Put a submit button in the form, and make it invisible using JavaScript. This fulfils 2 purposes:

The enter button will work because there is a submit button present
Non-javascript users will be able to use your form

I would capture the keypress event of the input elements, watch for a keycode of 13 (enter) and call submit. Like so:

$("form input").keypress(function(ev){
    if (ev.keyCode == 13) {
        $("form")[0].submit();
    }
});

This code is untested.

Why not just feature a button that is hidden using CSS, or even better JS: in that case the form will remain accessible to people that have JS disabled, and you should get your enter automatically

Use the jquery form plugin.

http://malsup.com/jquery/form/

Recommended? I'm not sure it's recommended to emulate this behaviour at all!

Whilst you can mess around with trying to detect keypress for Enter, there are some subtle browser differences about how Enter presses are supposed to work which won't be quite the same as what you produce. And your form will fail to work at all without JavaScript, which isn't ideal.

So put a submit button in. If you're really adamant that the button shouldn't appear on-page (and I'm not sure that's a good idea), you can always absolute-position it off the left-hand side of the page where no-one can see it.

Note that WebKit will submit the form anyway despite the lack of button. If you must patch this up with messy script, make sure you cancel the default action for the keypress or you may get double-submission.

Safari, Firefox, Opera, and IE8 all do submit the form when you hit enter in text input field. Neither is submit button nor javascript needed. Try yourself.

(Didn't test IE6/7 but I'm 95% sure they do too.)

I agree with other that capturing the enter is not good idea.

Update: the above is true, except that Firefox does not submit a form containing password field and having no submit button. No idea why, can anyone see a reason behind that?

Update 2: ... and except for IE, if there's only one input field.

I used following thing for the same purpose but not for jquery try this may help you.

function submitenter(myfield,e)
  {
    var keycode;
    if (window.event) keycode = window.event.keyCode;
    else if (e) keycode = e.which;
    else return true;

    if (keycode == 13)
    {
        myfield.form.onsubmit();
        return false;
    }
    else
     return true;
  }