Question

我正在使用Bootbox向用户显示自定义表单。之后，该表格用于修改UI。如果我在启动对话框中按“确定”按钮，则一切正常。在不触摸表单的情况下按ENTER按钮（默认情况下为所有值）也可以正常工作。但是，如果我将注意力集中在输入字段之一上，然后按Enter键，则页面将重置，就像按F5键一样。这个可以解决吗？

我的代码：

bootbox.confirm({
        message: "<form id='newGameForm' action=''>\
    Playlist ID: <br> \
    <input type='text' name='playlistID' size='35'/><br>\
    Ruleset: <br>\
    <input type='radio' name='rules' value='classic' checked> Classic\ 
    <input type='radio' name='rules' value='adv'> Advanced\
    </form>",
        callback: function (result) {
            if (result) {
                let newGameParams = $('#newGameForm').serializeArray().reduce(function (obj, item) {
                    obj[item.name] = item.value;
                    return obj;
                }, {});
                initGame(newGameParams);
            }
        }
    });

编辑：我发现在聚焦表单时按Enter可以绕过Bootbox的提交，而使用表单自己的提交。这会将?playlistID=ABC123&rules=classic添加到URL并重新加载页面。我可以以某种方式重新路由提交吗？

Answer 1

这不是打算使用确认助手的方式-您的用例非常需要您使用对话框助手。至少要使您的可能工作，您需要捕获要插入对话框的表单的library(tidyverse) vars <- c("a", "b", "c", "d") weights <- c(0.5, 0.7, 0.8, 0.2) df <- data.frame(cbind(c(1,4,5,7), c(2,3,7,5), c(1,1,2,3), c(4,5,3,3), c(3,2,2,1), c(5,5,7,1))) colnames(df) <- c("a","b","c","d","e","f") df %>% transpose() %>% simplify_all() %>% map_dbl(~weighted.mean(.x[vars], weights)) %>% add_column(df, wmean = .) #> a b c d e f wmean #> 1 1 2 1 4 3 5 1.590909 #> 2 4 3 1 5 2 5 2.681818 #> 3 5 7 2 3 2 7 4.363636 #> 4 7 5 3 3 1 1 4.545455事件。

这是一个例子。我还将您的表单移到了模板脚本标签中，因为它可以使其余部分更加整洁：

模板：

onsubmit

JavaScript：

<script type="text/template" id="form-template">
    <form id="newGameForm" action="">
        Playlist ID: <br>
        <input type="text" name="playlistID" size="35"><br>
        Ruleset: <br>
        <label><input type="radio" name="rules" value="classic" checked> Classic</label> <br>
        <label><input type="radio" name="rules" value="adv"> Advanced</label> <br>
    </form>
</script>

这仅在您不覆盖确认按钮上的btn类的情况下才有效，但是按原样，基本上在提交嵌入式表单时触发确认按钮的单击。此示例挂接到shown.bs.modal事件上的表单的Submit事件（该链接用于Bootstrap 4，但是在Bootstrap 3中可用相同的事件）。

引导箱确认：按下Enter键

1 个答案: