【问题标题】:Any way to support/shim button form attribute in IE10?有什么方法可以在 IE10 中支持/填充按钮表单属性?
【发布时间】:2013-05-22 14:16:47
【问题描述】:

我一直在使用 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 中的提交。

【问题讨论】:

  • jsfiddle.net/mf63k - 按原样,它似乎适用于所有浏览器?也许是您在某处有无效的 HTML 或 Javascript 导致此问题?
  • @JustAnil 你的小提琴不适用于我的 IE10。按钮什么都不做。
  • IE11 仍然不支持

标签: html internet-explorer-10


【解决方案1】:

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

在此处查看表格以获取更多信息: 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/

【讨论】:

  • 您可能希望使用 canisue.com 作为列出支持的来源,它是最新的。 caniuse.com/#search=Form%20features.
  • @jmoreno 好主意,在遇到 caniuse 之前一定已经回答了这个问题,我已经用链接更新了问题。谢谢!
  • 我在相关选项卡上找到了您的答案,来自问题的副本——接受的答案有一个解决方法/polyfill
  • $('button[type="submit"]).on('click tap', function(e){ if ($(this).attr('form')) { e. preventDefault(); $('#" + $(this).attr('form') ).trigger('submit'); } });
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-03-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多