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 ポリフィルを使用/作成して、目的の動作を複製することです。

クロスブラウザー ポリフィルのリストは、
https ://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills で確認できます。

動作を満たすものを見つけることができませんでしたform(ただし、1 分だけ探したので、自分で確認してください)。

これには独自のカスタムポリフィルを作成する必要があると思います。

単純なインライン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 に答える