Question

我正在使用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);

    });
});

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

Answer 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看起来不错：）

Answer 2

Bind

如果仍然无效，你也可以参考：

提交不是必需的，所以在你的情况下，我建议将你的逻辑移到beforeSubmit并始终返回false，因为这是在模态关闭之前触发的。目前，除了触发事件模态：destroy之外，没有办法手动关闭模态。这是一个例子：

import wx
class apple(wx.Frame):
    def __init__(self, parent, id):
        wx.Frame.__init__(self, parent, id, 'PyLabs', size=(840,600))
        panel = wx.Panel(self)
        status_bar = self.CreateStatusBar()
        menu_bar = wx.MenuBar()
        options_menu = wx.Menu()
        options_menu.Append(wx.NewId(), "Settings", "OpenSettings...")
        options_menu.Append(wx.NewId(), "Advanced", "Check Advanced...")
        menu_bar.Append(options_menu, "Options")
        self.SetMenuBar(menu_bar)
        New_Experiment_Button = wx.Button(panel, pos=(10,10), label='New Experiment', size=(130, 30))
        New_Experiment_Button.Bind(wx.EVT_BUTTON, self.openFrame)
        Result_Button = wx.Button(panel, pos=(10,60), label='Result of Experiment', size=(130, 30))
        Result_Button.Bind(wx.EVT_BUTTON, self.resultValue)
        self.Text = wx.TextCtrl(panel, -1, "Nothing yet", pos=(10,100), size=(200,30))

    def openFrame(self, event):
        box = wx.TextEntryDialog(None, 'What is your answer', 'Heading','Hi')
        if box.ShowModal() == wx.ID_OK:
            self.answer = box.GetValue()
        box.Destroy()

    def resultValue(self, event):
        try:
            self.Text.SetValue(self.answer)
        except:
            self.Text.SetValue("No answer yet supplied")

if __name__=='__main__':
    app=wx.App()
    frame = apple(parent=None, id=-1)
    frame.Show()
    app.MainLoop()

如果模态没有成功，则模式不会提交，之前仅在按钮的“输入”和“单击”时触发“提交”。

Answer 3

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

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

3 个答案: