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

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

WBOY
リリース: 2016-05-16 17:11:40
オリジナル
1305 人が閲覧しました

実際のアプリケーション開発では、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:



コードをコピー コードは次のとおりです。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート