--/-- --

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

05/30 2008

クリックするとフォーム内の字が消えるJavascript

検索やメールアドレス記入のための入力フォームに、あらかじめ「検索キーワードの挿入」といった薄い文字が記されていて、クリックすると消える。しかもフォームの外をクリックすると字が復活する、そういう入力フォームをhtmlとjavascriptで簡単に実装しましょう。

フォーム内のvalueの値はjavascriptと関係なく自由に変えることができます。



<form>
<input type="text" value="ご記入下さい"
 onFocus="cText(this)" onBlur="sText(this)" style="color:#999">
</form>


<script type="text/javascript"><!--
function cText(obj){
if(obj.value==obj.defaultValue){
obj.value="";
obj.style.color="#000";
}
}

function sText(obj){
if(obj.value==""){
obj.value=obj.defaultValue;
obj.style.color="#999";
}
}
//-->
</script>




このやり方は、同一ページ内に複数の入力フォームがあって、一つ一つのフォームの初期文章が異なっている場合にも、同じ関数で制御可能となるので、非常に便利です。このブログの右ボーダーの中にも、沢山の入力フォームがありますが、関数はこの2つのみ!それぞれの入力フォームにそれぞれのvalue値を放り込んで、最後にonFocus="cText(this)" onBlur="sText(this)" style="color:#999"を加えれば、OKです。

関連記事



blog comments powered by Disqus
このページのTOPへ
聖書リスニング
DTメンバー募集(無料!)

Devotion Timeのメルマガメンバーになりませんか!メンバー限定企画もあり!ご希望の方はメールアドレスを入力して下さい。(さらに詳しく >>)

Profile

ブロガー: 西原智彦
1972年広島生まれ。ロボットが好きで工学修士に(1996)。聖書に惚れ込み、実践神学修士に(2005)。(さらに詳しく >>)

カテゴリ
お問い合わせフォーム

個人的な感想、ご質問にどうぞ

お名前(ハンドルネームOKです):
メールアドレス:
件名:
本文:

Copyright © Devotion Time All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。