按下输入窗体时,Kube模态关闭

Question

按下输入窗体时,Kube模态关闭

我正在使用Kube CSS和JS框架(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>

Run Code Online (Sandbox Code Playgroud)

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);

    });
});

Run Code Online (Sandbox Code Playgroud)

我希望当用户点击输入任何输入时提交表单,而不关闭模态框.

Answer 1

Aak*_*bey 2

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

库贝看起来不错:)

归档时间：	8 年，1 月前
查看次数：	374 次
最近记录：	8 年，1 月前