首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >当没有type="submit“元素存在时,未在ENTER上提交表单

问当没有type="submit“元素存在时,未在ENTER上提交表单
EN

Stack Overflow用户
提问于 2014-10-17 21:27:56
回答 3查看 4.5K关注 0票数 2

我们使用自定义按钮提交表单。将单击事件分配给..btn submit,以提交相应的表单。但是,如果没有某种类型的<button type="submit">或<input type="submit">元素位于<form>中,则在“用户名”或“密码”文本字段中按ENTER键都不会提交表单。

如何仍然允许用户在没有type="submit"元素的情况下在<form>字段中按ENTER键提交表单?

HTML

代码语言:javascript
复制
<form action="post.php" method="post">
<p><b>Username</b> <input type="text" name="username" style="width: 300px; font-size: 18px"></p>
<p><b>Password</b> <input type="password" name="password" style="width: 300px; font-size: 18px"></p>

<input type="hidden" name="user_login" value="1">
<div class="btn-inline btn-green btn-submit">Log In</div>
</form>

JS

代码语言:javascript
复制
$(document).ready(function()
{
    $('.btn-submit').on('click', function(e)
    {
        $(this).parents('form:first').submit();
    });
});
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-10-17 21:48:01

您可以这样做,以便当enter键在输入中按下时,它会激活submit按钮。

代码语言:javascript
复制
$('form').keypress(function(e){
    var code = e.keyCode || e.which;

    if( code === 13 ) {
        e.preventDefault();
        $( ".btn-submit" ).click();
    };
});

编辑

这不会导致单击submit按钮,如果在textarea中按下返回,它将只对现在类型为text的input进行单击。

代码语言:javascript
复制
$('input:text').keypress(function(e){
    var code = e.keyCode || e.which;

    if( code === 13 ) {
        e.preventDefault();
        $( ".btn-submit" ).click();
    };
});
票数 4
EN

Stack Overflow用户

发布于 2014-10-17 21:33:14

您需要捕获enter键按下,最好在表单上使用jQuery委托。我想,只需将您的委托锁定在表单上,并查看输入元素,或者查看表单的主体。本质上是说“看看这个最上面的元素,触发内部元素的X动作”。您的父级将是表单,内部输入,操作是按下或键控。

参见:jQuery delegate method not working for keydown and keypress

然后在功能测试中按下按键。如果进入,提交。如果没有,则返回false。

PS:当我不在手机上的时候,我可以帮你做一个代码片段。

票数 1
EN

Stack Overflow用户

发布于 2014-10-17 21:42:54

这就是为什么:

当用户试图提交表单时,提交事件将发送给元素。它只能附加到<form>元素。表单可以通过单击显式<input type="submit">、<input type="image">或<button type="submit">提交,或者在某些表单元素有焦点时按Enter。 根据浏览器的不同,只有当表单有一个文本字段时,或者只有当存在提交按钮时,Enter键才可能导致表单提交。接口不应依赖此键的特定行为,除非通过观察Enter键按下的keypress事件来强制发出该问题。

来源:http://api.jquery.com/submit/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/26433677

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档