Question

我有一个带有两个按钮和一些文本输入的表单。默认情况下，如果按Enter键，它将“单击”第一个按钮。我想这样做，如果您输入任一文本框，如果您按Enter键，第二个按钮将是要点击的按钮。

在下面的简化示例中，按Enter键将默认使用facebook按钮“单击”登录。即使在电子邮件或密码文本输入中输入了某些内容，也会发生这种情况。我希望如果在电子邮件或密码输入中输入内容，则按Enter将使用电子邮件/密码按钮“点击”登录。

<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>

目标就像：

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

setToBeNewDefaultClickIfEnterIsPressed()更改默认值的位置。

Answer 1

请参阅：Multiple submit buttons on HTML form – designate one button as default

您也可以将它们分成不同的形式并与之一起玩。另见：preventDefault

Answer 2

试试这个。

我扔了一个字段，让你选择你想要的默认按钮，只是为了展示它是如何工作的。如果该字段为空，我创建了默认按钮＃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>

使用“enter”动态更改按下哪个按钮

2 个答案: