我有一个带有关闭 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 是:
- 附加一个隐藏的按钮标签
- 在事件 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 规则隐藏按钮
关于javascript - 谷歌关闭 - 触发表单提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14438613/