テキストフィールドに文字がある場合のみ画像を表示する


動作ブラウザ 【 IE:3.0   NN:6.0
Internet Explorer Netscape Navigator Opera iCab Safari
3.0x 4.0x 4.5 5.0x 5.5 6.0 2.0x 3.0x 4.0x 4.x 6.0 7.0 7.x 2.x 1.x
Windows - × × × × -
Macintosh - × × × × ×
UNIX - - - - - × × × × -

ポイント if (n != "") { document.images["btn"].style.visibility = "visible"; }else{ document.images["btn"].style.visibility = "hidden"; } <input type="text" name="myTEXT" onBlur="check(this.value)">
説  明 テキストフィールドに文字が入力された場合に画像を表示するにはテキストフィールドにonBlurイベントを指定し、イベント発生時に文字が入力されているかどうか調べます。文字が入力されている場合には画像をスタイルシートを使って表示し、そうでない場合は非表示にします。
サンプル <html> <head> <title>テキストフィールドに文字がある場合のみ画像を表示する</title> <script language="JavaScript"><!-- function check(n) { if (n != "") { document.images["btn"].style.visibility = "visible"; }else{ document.images["btn"].style.visibility = "hidden"; } } // --></script> </head> <body> <form> <img src="button.gif" name="btn" style="visibility:hidden"> <input type="text" name="myTEXT" onBlur="check(this.value)"> </form> </body> </html>
補足説明 なし

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!

写真素材 PIXTA