Javascript 在表单中按enter键时，Kube模式关闭_Javascript_Jquery_Html_Css

Javascript 在表单中按enter键时，Kube模式关闭

javascript jquery html css

Javascript 在表单中按enter键时，Kube模式关闭,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我使用了（6.5.2）中的一个模态，其中包含一个表单。当我点击回车键时，模式关闭，而不提交表单编辑：当关注密码或搜索输入时不会发生这种情况-将类型从“文本”更改为“密码”可以解决问题 <!DOCTYPE html> <html> <head> <title>Basic Template</title> <meta charset="utf-8"> <meta name="viewport" c

我使用了（6.5.2）中的一个模态，其中包含一个表单。当我点击回车键时，模式关闭，而不提交表单

编辑：当关注密码或搜索输入时不会发生这种情况-将类型从“文本”更改为“密码”可以解决问题

<!DOCTYPE html>
<html>
<head>
    <title>Basic Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Kube CSS -->
    <link rel="stylesheet" href="dist/css/kube.css">
</head>
<body>
    <h1>Hello, world!</h1>

    <div id='ui-modal-test' class='modal-box hide'>
        <div class='modal' style='width:95%'>
            <span class='close'></span>
            <div class='modal-header'>Modal Form Test</div>
            <div class='modal-body'>
                <form id="ui-modal-form">
                    <input type="text" name="field1">
                    <input type="text" name="field2">
                    <input type="text" name="field3">
                    <button>Apply</button>
                </form>
            </div>
        </div>
    </div>
    <button data-component="modal" data-target="#ui-modal-test">Open</button>

    <!-- Kube JS + jQuery are used for some functionality, but are not required for the basic setup -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="dist/js/kube.js"></script>
</body>
</html>

我希望表单在用户点击任何输入时提交，而不关闭模式框

            <form onSubmit={event => event.preventDefault()}>
                <input type="text" name="field1">
                <input type="text" name="field2">
                <input type="text" name="field3">
                <button>Apply</button>
            </form>

如果模式失败，则不会提交。beforeSubmit只会在单击按钮后立即触发。

我不知道Kube，但我尝试了你所说的，这是一个问题。然后，我打开dist文件夹中的kube.js文件来检查模态。

$('input[type=text]').keypress(function (e) {
  if (e.which == 13) {
    e.stopPropagation();
    $('form').submit();
  }
});

我发现这个特定的函数是导致第2167行的原因-

handleEnter: function(e)
    {
        if (e.which === 13)
        {
            e.preventDefault();
            this.close(false);
        }
    }

13是输入键事件的代码。我想这是库贝的默认情况。也许你可以覆盖它，我认为它有一些功能来禁用事件。如果我像这样更改参数

this.close（true）

，它工作得很好

希望这能告诉你为什么会发生这种情况

库贝看起来很好：）

和以前一样的行为。我已经更新了我的问题以显示它是如何提交的。注意：非常有效，在

this.model.save（this.model.attributes，success:function（）{

语法错误：缺失）上出现错误参数列表后。你从哪里获得此代码？看起来像是文档中的内容。我在我的计算机上复制了相同的内容，似乎工作正常。我能够提交并查看后端的响应。当光标位于任何字段上时，我都可以提交。奇怪的是，我已经在Chrome、FF和IE中测试了此功能。同样。。。你是使用enter提交的吗？是的，我用鼠标和enterWell都试过了。一定有些不同。你用的是什么版本的Kube和jQuery？我刚下载了最新版本，也有同样的问题。我在没有Kube的情况下完成了这项工作，只是用jQuery查看提交是否发生在第703行，你可以看到定义关闭函数的。通过传递false，它跳过了防止默认行为的第一个检查。传递true可以解决这种情况下的问题。这是我找到的解决方法之一，可能还有其他方法。我得到一个错误：

TypeError:e.preventDefault不是第2004行的函数，但至少模态没有关闭！！无需担心，删除整个函数解决了这个问题：）
$('input[type=text]').keypress(function (e) {
  if (e.which == 13) {
    e.stopPropagation();
    $('form').submit();
  }
});

handleEnter: function(e)
    {
        if (e.which === 13)
        {
            e.preventDefault();
            this.close(false);
        }
    }