ホームページ >ウェブフロントエンド >jsチュートリアル >js監視フォーム値変更の同期の問題、クロスブラウザサポートフォームの特殊効果
実現したい機能はおおよそ次のとおりです。
テキストボックスが2つあり、1つは読み取り専用で、もう1つは入力可能です。入力テキスト ボックスにテキストを入力する必要がある場合、読み取り専用テキスト ボックスは入力された値を取得でき、読み取り専用テキスト ボックスの横にプロンプト メッセージが表示され、読み取り専用テキスト ボックスの内容が表示されます。リアルタイム。
この関数は単純に見えますが、想像されているほど単純ではありません。 (入力ボックスの処理については何も説明する必要がないことに注意してください。重要なのは読み取り専用ボックスの処理です)
最初に、通常、読み取りで onchange イベントを使用することを考えます。テキストボックスのみ。試してみたところ、onchange はまったく役に立たないことがわかりました。このイベントは、テキスト ボックスがフォーカスを取得した後、コンテンツが変更されてフォーカスを失った後にトリガーされます。読み取り専用のテキスト ボックスでは、そのようなことはまったくありません。内容はjsを介して変更されます。したがって、別の方法を見つける必要があります。
この時点で、onpropertychange イベントがオンラインで見つかりました。このイベントは、変更方法に関係なく、テキスト ボックスのプロパティが変更されるとトリガーされます。値だけでなくプロパティも変化することに注意してください。試してみると、本当に効果があります。ただし、このイベントは IE 限定です。 WEB開発ではブラウザの互換性の問題を考慮する必要があります。そこで私は探索を続けました...
インターネット上で別のイベント oninput を見つけました。これはインターネット上のあらゆる場所に存在します。fireFox のこのイベントは、IE の onpropertychange イベントに相当します。しかし、実際に試してみると、まったく同じではないことがわかりました。 oninput イベントは fireFox では機能しないようです。一定期間のテストの後、ついに oninput が onpropertychange と同じではないことに気づきました (真剣なテストもせずにインターネット上のあらゆる場所に再投稿されました)。 oninput は、すべての属性が変更された場合ではなく、ユーザー入力値が変更された場合 (つまり、値が変更された場合) にのみトリガーされます。また、oninput は、js を通じて値が変更された場合にはトリガーされません。今、私は落ち込んでいます。ようやく希望が見えてきたのに、幸いにも絶望はしなかったのですが… ブラウザの互換性の問題は本当に厄介ですね。
考えてみると、何かが思い浮かびます。 fireFox などのブラウザの場合、タイマーを使用して読み取り専用テキスト ボックスの内容が変更されたかどうかを確認できます。テストを経て、ようやく完成しました。以下のコードを投稿してみんなと共有してください。
IE での効果:
FireFox でのレンダリング:
さらに、Google Chrome (fireFox と同じ) 上でも正常にテストできました。
HTML コード: