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

【问题标题】：Dynamically changing which button is pressed with "enter"使用“enter”动态更改按下哪个按钮
【发布时间】：2013-08-14 03:16:01
【问题描述】：

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

在下面的简化示例中，默认情况下按 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() 更改默认输入的位置。

【问题讨论】：

AFAIK，它不是那样工作的。您最好的选择可能是在文档上设置一个 keydown 处理程序，听有人按 Enter，然后 preventDefault 并提交您想要的任何表单。

标签： javascript jquery html input enter

【解决方案1】：

试试这个。

我添加了一个字段，让您可以选择您想成为默认按钮的按钮，只是为了展示它的工作原理。如果该字段为空，我将默认按钮设置为 #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>

【讨论】：

【解决方案2】：

见：Multiple submit buttons on HTML form – designate one button as default

您还可以将它们制作成单独的表格并使用它。另见：preventDefault

【讨论】：