谷歌关闭 - 触发表单提交答案

【问题标题】：Google closure - Triggering form submit谷歌关闭 - 触发表单提交
【发布时间】：2013-01-21 12:28:12
【问题描述】：

我有一个带有关闭 ui 按钮的表单：

<form id="login-form">
    <div>
        <input type="text" name="email" />
        <input type="password" name="password" />
        <div id="submit-login" class="goog-css3-button">Sign in</div>
    </div>
</form>

我让我的按钮提交我的表单：

var myButton = goog.ui.decorate(goog.dom.getElement("submit-login"));
myButton.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
goog.events.listen(myButton, goog.ui.Component.EventType.ACTION, function(e) {
    goog.dom.getElement("login-form").submit();
});

现在，我有以下两个问题：

当我在其中一个字段中按“Enter”时未提交表单
表单上没有触发事件goog.events.EventType.SUBMIT，所以我最终的听众不会被处决

我该如何解决这个问题？

【问题讨论】：

标签： javascript dom-events form-submit google-closure google-closure-library

【解决方案1】：

我发现的技巧是：

附加隐藏按钮标签
触发点击事件ACTION上的隐藏按钮

var hiddenSubmit = goog.dom.createDom("button",{ type : "submit", "style" : "visibility: hidden; position: absolute; z-index: -10000"});
goog.dom.appendChild(goog.dom.getElement("submit-login"), hiddenSubmit);
goog.events.listen(myButton, goog.ui.Component.EventType.ACTION, function(e) {
    hiddenSubmit.click();
});

编辑：由于 Safari 和 Chrome 不会触发使用“显示：无”元素隐藏的事件，我们必须使用其他 css 规则隐藏按钮

【讨论】：