FORMとの連動

入力への連動

[IE3ok][NN4ok]

最初に作ったスクリプトではIEで正しく動作しませんでした。 そこで、スクリプトを工夫してIEでも動作するように改良してみました。

↓に値をいれてリターンかTABを押してください。
x 2 =
ソースリスト 
<SCRIPT LANGUAGE="JavaScript">
<!-- Code hiding from here
function change(form, val) {
	in_val = val.value
	out_val = in_val * 2;
	form.ans.value = out_val;
	return false;
}
// end -->
</SCRIPT>

<FORM NAME="f" onSubmit="return change(this, this.num)">
<INPUT NAME="num" SIZE="5" ONCHANGE="change(this.form, this)">
x 2 = <INPUT NAME="ans" SIZE="5">
</FORM>
赤字の部分が変更のポイントです。 IEではフォームでリターンキーが入力されるとsubmitイベントが発生します。 そこで、このsubmitイベントをFORMタグのonSubmitイベントハンドラで拾います。 ここでchange()関数を呼び出し、右の欄の計算し値を設定します。

次のポイントはフォームがsubmitされるのを阻止することです。実際には値の 計算をしたいだけで、フォームをサーバに送りたいわけではありません。 JavaScriptではイベントハンドラでfalseを返すことで、submitを阻止する ことができます。この例ではchange()関数でfalseを返し、それをreturn でonSubmitイベントハンドラの結果として返すことで、submitをしないように しています(右図参照)。

NN4ではリターンキーを押した後beep音がなってしまいます。