説明

テキストボックスのもつイベントの1つ「onChange」(IE3/NN2)を使ってみます。

実行例

適当な文字を入れてから、フォーカスを外してください。 左のテキストボックスに英字の小文字を入れると右のテキストボックスでは、大文字になります。 右のテキストボックスは、その反対です。

　 　

コード

<FORM>
<INPUT type="text" name="text1" onChange="this.form.text2.value=this.value.toUpperCase();">
<INPUT type="text" name="text2" onChange="this.form.text1.value=this.value.toLowerCase();">
</FORM>

解説＆ステップアップ

IE(確認ver.5.5)では、テキストボックスの「onChange」イベントは、変更後にフォーカスが外れたときのようです。 NN(確認ver.4.7)では、フォーカスが外れたときの他に、リターンキーが押されたときもイベントが発生するようです。 ただし変更せずにフォーカスを移動しただけのときや、スクリプトから内容を変更したときはイベントは発生しません。

動作確認

IE5.0(win)、IE5.5(win)、NN4.7(win)