2013-05-22 15 views
5

私はHTML5のボタンフォーム属性を使用していました。私の送信ボタンをフォームの外に表示させ、依然として投稿をトリガーするようにしました。IE10で/ shimボタンフォームの属性をサポートする方法はありますか?

<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> 

私はこの作業クローム/ Firefoxの/ Safariで罰金が、私は今日IE10でそれをテストするために行って、フォームが提出されていません。

私のフォームは次のようになります!

フォーム=属性を使用しないようにすべてのページを再設計する以外に、誰もこれを回避する方法を知っていますか?私はフォーム内の通常の送信ボタンのように動作します。ここでは、テキストフィールドに入力するとフォームを送信し、ボタンをクリックします。

可能であれば、JavaScriptで送信をトリガーするために、クリックイベントを追加したり、テキストフィールドを入力することを避けたいと考えています。

+0

http://jsfiddle.net/mf63k/ - のようになり、すべてのブラウザで動作しているようですが?おそらくあなたはこの問題を引き起こしている無効なHTMLやJavascriptを持っていますか? – Anil

+1

@JustAnilあなたのフィドルは私のためにIE10で動作していません。ボタンは何もしません。 – Paul

+0

まだIE11でサポートされていません –

答えて

8

IEではform="myForm"という属性はサポートされていないようです。

見る詳細はこちら表:これを複製する http://caniuse.com/#search=Form%20features

唯一の方法は、目的の動作を再現するためにはJavaScriptポリフィルを作成/使用することになります。
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

私はform行動を埋めるものを見つけることができませんでした(だけ分間に見えたので、自分で確認してください):

あなたはクロスブラウザのリストを見つけることができますが、ここでpolyfills。

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

簡単なインラインonclickは次のようになります。

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

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

+1

canisue.comリストされた支援の源泉として、より多くの人々に役立つ。 http://caniuse.com/#search=Form%20features – jmoreno

+0

@jmoreno良いアイデア、私はcaniuseに出くわす前に、これを答える必要があります、私はリンクで質問を更新しました。ありがとう! – Anil

+0

質問のdupから関連するタブであなたの答えを見つけました - 受け入れられた答えは回避策/ polyfill – jmoreno

関連する問題