Google关闭-触发表单提交

Google closure - Triggering form submit

本文关键字：表单提交 关闭 Google      更新时间：2023-09-26

我有一个带有关闭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未在表单上触发，所以我最终的监听器不会被执行

我该如何解决这个问题?

我发现的hack是:

  • 添加一个隐藏的按钮标签
  • 触发事件中隐藏按钮的点击动作


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不触发事件隐藏与"Display: none"元素，我们必须隐藏按钮与其他css规则

相关文章：