在表单中按 Enter 时 Kube 模态关闭答案

【问题标题】：Kube modal closes when pressing enter in form在表单中按 Enter 时 Kube 模态关闭
【发布时间】：2017-10-10 18:37:18
【问题描述】：

我正在使用 Kube CSS & JS framework (6.5.2) 中的模态框，其中包含一个表单。当我按 Enter 时，模式关闭而不提交表单。

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

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

JS：

$('#ui-modal-form').on('submit', function(event){
    event.preventDefault(); // modal still closes before submitting form

    var field1 = $(this).find('input[name=field1]').val().toLowerCase();
    var field2 = $(this).find('input[name=field2]').val();
    var field3 = $(this).find('input[name=field3]').val();

    $.post('/post.php', {
        field1: field1,
        field2: field2,
        field3: field3,
    }, function(response){
        var response = JSON.parse(response);

    });
});

我希望当用户在任何输入上按 Enter 键时提交表单，而不关闭模式框。

【问题讨论】：

我在我的电脑上复制了同样的东西，似乎工作得很好。我可以提交并查看来自后端的响应。当光标在任何字段上时，我可以提交。
奇怪，我已经在 Chrome、FF 和 IE 中测试过了。都一样...您是否使用 enter 提交？
是的，我用鼠标和输入都试过了
嗯，一定有什么不同。您使用的是什么版本的 Kube 和 jQuery？我刚刚下载了最新版本，遇到了同样的问题。
我已经在没有 Kube 的情况下完成了，只是用 jquery 来查看提交是否正在发生

标签： javascript jquery html css

【解决方案1】：

我不知道 Kube，但我尝试了你所说的，这是一个问题。然后我打开 dist 文件夹中的 kube.js 文件来检查模态。我发现这个特定功能是第 2167 行的原因 -

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

13 是 Enter 键事件的代码。我猜它默认在 kube 中。也许您可以覆盖它，我认为其中有一些功能可以禁用事件。如果我像this.close(true)这样更改参数，它会很好地工作。

希望这能为您提供发生这种情况的原因。

Kube 看起来不错 :)

【讨论】：

第703行可以看到close函数的定义。通过传递 false，它会跳过第一次检查以防止默认行为。因此，通过 true 解决了这种情况下的问题。这是我找到的一种解决方法，可能还有其他方法。
我收到一个错误：TypeError: e.preventDefault is not a function 在 2004 行，但至少模式没有关闭！！
没关系，删除整个函数可以解决问题:)

【解决方案2】：

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

如果还是不行也可以参考：

submit 不是必需的，因此在您的情况下，我建议您将逻辑移至 beforeSubmit 并始终返回 false，因为这是在模式关闭之前触发的。目前，除了触发 modal:destroy 事件之外，没有办法手动关闭 modal。这是一个例子：

var Modal = Backbone.Modal.extend({
  template: _.template($('#modal-template').html()),
  submitEl: 'button',
  beforeSubmit: function() {
    // show your awesome loader here
    this.model.save(this.model.attributes, success: function() {
      this.trigger('modal:destroy');
    });
    return false;
  }
});

如果不成功，您的模态不会提交，并且 beforeSubmit 仅触发按钮的 onEnter 和 onClick。

【讨论】：

注意工作正常，this.model.save(this.model.attributes, success: function() { 有错误。 SyntaxError: missing ) after argument list。你从哪里得到这个代码？看起来像文档中的内容。

【解决方案3】：

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

【讨论】：

与以前的行为相同。我更新了我的问题以显示它是如何提交的。