ホームページ >ウェブフロントエンド >jsチュートリアル >js は、例としてフォームのクリックと送信をシミュレートします。主流のブラウザーの JavaScript スキルと互換性があります。

js は、例としてフォームのクリックと送信をシミュレートします。主流のブラウザーの JavaScript スキルと互換性があります。

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル: 2016-05-16 17:11:401365ブラウズ

実際のアプリケーション開発では、JS モジュールのイベントを使用することがよくありますが、簡単な例では、フォームの外にある「送信」ボタンをクリックしてフォームを送信するなど、いくつかの問題が発生することがあります。コードを書いてみましょう。

HTML:

コードをコピーコードは次のとおりです:

< ;h3> 「送信」をクリックすると、テスト送信ボタンのクリックイベントもトリガーされます。
<ボタン id="btn">送信
<フォームアクション="#" メソッド="get" id="フォーム"> ;input type="text" name="site" value="www.woiweb.net" readonly/>

Javscript:

コードをコピーしますコードは次のとおりです。

 
テストの結果、IE、FF、Chrome、Opera、Safari では問題なく、正常にフォームを送信できました。

しかし、実際のデザインでは、送信ボタンの見栄えを良くするために、ビルダーはタグを使用してボタンを処理し、背景画像を追加してボタンをシミュレートすることがよくあります。フォームを送信するためのタグの場合、HTML のみを変更します。

HTML:

コードをコピーコードは次のとおりです:

< ;h3> 「送信」をクリックすると、テスト送信ボタンのクリックイベントもトリガーされます。

<ボタン id="btn">送信
<フォームアクション="#" メソッド="get" id="フォーム"> ;input type="text" name="site" value="www.woiweb.net" readonly/>

送信ボタンをシミュレート

JavaScript:

コードをコピーしますコードは次のとおりです。

実行後、IE、FF、Opera は正常に動作しましたが、その後、Chrome と Safari が正常に動作しなくなりました。オンラインで検索したところ、ラベルにはボタンと同じ onclick() イベントがないことがわかりました。解決策は、IE と FF で異なるロジックを記述することです。
javascript:

コードをコピーコードは次のとおりです。