在 Enter 键上提交登录信息 [重复]

Posted 2023-02-22

【中文标题】在 Enter 键上提交登录信息 [重复]

【英文标题】：Submit the login on Enter key [duplicate]

【发布时间】：2017-06-20 05:25:13

【问题描述】：

我试图在按下 Enter 键时提交登录，之前所有内容都在表单标签下，因此它可以在按下 Enter 键时工作。但现在不会了，谁能帮我解决这个问题。

html：

<div class="login-form">
    <p>Please Sign In</p>
    <div class="form-group" id="login-fields">
        <div class="cols-sm-10">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"><span class="text--white glyphicon glyphicon-user"></span></i>
                </span>
                <input type="text" name="user" id="user" placeholder="Username" class="form-control" required/>
            </div>
        </div>
    </div>
    <div class="form-group" id="login-fields">
        <div class="cols-sm-10">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"><span class="text--white glyphicon glyphicon-lock"></span></i>
                </span>
                <input type="password" name="pass" id="pass" placeholder="Password" class="form-control" required/>
            </div>
        </div>
    </div>
    <div>
        <input type="submit" value="Sign In" id="submit-login" onclick="save()" />
    </div>
</div>
</div>

【问题讨论】：

如果你想让它表现得像一个带有默认操作的表单，为什么不把它放回表单标签中呢？

我有一个对此登录表单的 ajax PUT 请求调用，早些时候当我有表单标记时，它会默认方法='post'并且不识别 PUT 方法。删除表单标签后，它运行良好。所以不得不删除它

谢谢@MikeMcCaughan，我会尝试该链接上的解决方案并返回，看来这是可能的解决方案。

@MikeMcCaughan 我根据您的建议标记了此副本，该解决方案确实对我有所帮助。再次感谢您的欢呼

【参考方案1】：

你有没有尝试在它周围放置一个表单标签并将一个事件监听器绑定到它：

document.querySelector('.myForm').addEventListener('submit', function(e) 
  e.preventDefault();
  // do your put request here