5

我一直在使用 HTML5 的按钮表单属性让我的提交按钮显示在表单之外并且仍然触发我的提交。

我的表格看起来像这样：

<article>
  <header>This is my form</header>
  <section>
    <p>Something explaining what is happening on this form.</p>
    <form id="myform" action="/submit" name="myform">
      <input type="text" name="thing">
    </form>
  </section>
  <footer>
     <button type="submit" form="myform">Submit</button>
  </footer>
</article>

我在 Chrome/Firefox/Safari 中运行良好，但我今天在 IE10 中对其进行了测试，但表单没有提交！

除了重新设计我的所有页面以不使用 form= 属性之外，有人知道如何解决这个问题吗？我希望它像表单内的普通提交按钮一样工作，在文本字段中按 Enter 将提交表单以及单击按钮。

如果可能，我想避免添加点击事件并在文本字段上监听输入以触发 JavaScript 中的提交。

4

1 回答 1

8

似乎form="myForm"IE 不支持该属性。

在此处查看表格以获取更多信息： http ://caniuse.com/#search=Form%20features

复制它的唯一方法是使用/创建一个 javascript polyfill 来复制所需的行为。

您可以在此处找到跨浏览器 polyfill 的列表：
https ://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

我找不到一个来填补这种form行为（但只看了一分钟，所以检查一下自己）。

我认为您将不得不为此编写自己的自定义 polyfill。

一个简单的内联onclick看起来像这样： 

<button 
    type="submit"
    form="myform"
    onclick="javascript:getElementById(this.getAttribute('form')).submit();"
>Submit</button>

JSFiddle：http: //jsfiddle.net/mf63k/4/

于 2013-05-22T14:51:17.720 回答