ウェブページで、テキストボックスの内容を、もうひとつのテキストボックスに飛ばす、というのは、JavaScriptではお馴染みのパターン。
使うイベントハンドラは、onChange。
ところが、これが、IEで、思ったように動かないことがあることがわかった。
Submitボタンを押せば、飛ぶ。
ところが、Submitボタンを押さずに改行キーを押すと、直前の入力分が、飛ばない。
モジラ系、サファリ系、オペラでは、こういうことはない。
もちろん、普通のページでは、Submitボタンを押しても、改行キーを押しても、ページがすぐリロードしてしまうので、結果は似たようなもの。
でも、よく見ていると、Submitボタンを押したときには一瞬飛んでいるのが確認できるのに対して、改行キーの場合には飛んでいること自体が確認できない。
どういうときに違いが明確になるかというと、たとえば、飛ばし先を、frameを使って別ページにしているような場合。
<input type="text" name="thisBox" onChange="parent.otherPage.document.forms.formID.theBox.value = this.form.thisBox.value;">
なんてときだ。
ページがリロードしても、飛んだ結果は別ページの方に残るから。
入力したあとに、Submitボタンでなくても、どこかをマウスで空打ちするなど、明示的にフォーカスを外せば、正常にonChangeが発生する。
ところが、改行キーを押してしまうと、onChangeが発生しない。
なんとも不思議である。
そういえば、エクセルでも似たようなことがあったなあ、などとは思うが。
解決策はあればあるもので、onPropertyChangeというのを代わりに使えばいいらしい。
つまり、
<input type="text" name="thisBox" onChange="parent.otherPage.document.forms.formID.theBox.value = this.form.thisBox.value;" onPropertyChange="parent.otherPage.document.forms.formID.theBox.value = this.form.thisBox.value;">
のように書き足すだけ。
あまり紹介されていないイベントハンドラだし、どうもIE以外では使えないようなのだが。
onPropertyChangeは、本来は、「プロパティーが変化したとき」だから、色が変わったりしたときに発生するらしいのだが、テキストボックスの中身が変わったときにも発生してくれる。
もっとも、onChangeが、フォーカスが外れたときにはじめてイベントが発生するのに、onPropertyChangeは1字入力するごとに発生する。
なんとも、ぜいたく、お節介すぎるのだが、実用としては、同じように使える。
