Dynamically changing which button is pressed with "enter"

StackOverflow https://stackoverflow.com/questions/18193285

题

I have a form with two buttons and some text inputs. By default if you press enter it will "click" the first button. I'd like to make it so that if you type in either of the text boxes, if you press enter the second button will be the one to be clicked.

In the simplified example below, pressing enter will by default "click" the log in using facebook button. This will happen even if something is entered in the email or password text inputs. I'd like it so that if something is entered in either the email or password inputs, then pressing enter will "click" the login with email/password button.

<form>
    <button class="login-facebook">Log in with Facebook</button>
    <input type="text" class="email" placeholder="email"><br>
    <input type="password" class="password" placeholder="password"><br>
    <button class="login-password">Log in with email/password</button>   
</form>

Goal is something like:

$('.email').add('.password').on('change', function() {
    $('.login-password').setToBeNewDefaultClickIfEnterIsPressed();   
});

Where setToBeNewDefaultClickIfEnterIsPressed() changes the default enter.

有帮助吗？

解决方案

See: Multiple submit buttons on HTML form – designate one button as default

You can also make them separate forms and play with that. See also: preventDefault

其他提示

Try this.

I threw in a field that let's you select the button you want to be the default, just to show how it works. If that field is empty, I made the default button #2.

jsFiddle here

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

        <script type="text/javascript">
            var defaultbutt = 2;
            $(document).ready(function() {

                $('[id^=txt]').blur(function() {
                    if ($(this).val() != '') {
                        defaultbutt = $('#pickabutt').val();
                        if (defaultbutt=='') defaultbutt = 2;
                    }
                });

                $('#pickabutt').blur(function() {
                    defaultbutt = $('#pickabutt').val();
                    if (defaultbutt=='') defaultbutt = 2;
                });

                $(document).keypress(function(e) {
                    if(e.which == 13) {
                        $('#mybutt' + defaultbutt).click();
                    }
                });

                $('[id^=mybutt]').click(function() {
                    var num = $(this).val();
                    alert('You clicked button: ' + num);
                });

            }); //END $(document).ready()

        </script>
    </head>
<body>

    Login:<br /><input id="txtLogin" type="text" /><br />
    PWord:<br /><input id="txtPassword" type="password" /><br />
    <input type="button" id="mybutt1" value="One" />
    <input type="button" id="mybutt2" value="Two" />
    <input type="button" id="mybutt3" value="Three" />

    Default button Number:<br /><input id="pickabutt" type="text" /><br />

</body>
</html>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top