検索やメールアドレス記入のための入力フォームに、あらかじめ「検索キーワードの挿入」といった薄い文字が記されていて、クリックすると消える。しかもフォームの外をクリックすると字が復活する、そういう入力フォームをhtmlとjavascriptで簡単に実装しましょう。
フォーム内のvalueの値はjavascriptと関係なく自由に変えることができます。
このやり方は、同一ページ内に複数の入力フォームがあって、一つ一つのフォームの初期文章が異なっている場合にも、同じ関数で制御可能となるので、非常に便利です。このブログの右ボーダーの中にも、沢山の入力フォームがありますが、関数はこの２つのみ！それぞれの入力フォームにそれぞれのvalue値を放り込んで、最後にonFocus="cText(this)" onBlur="sText(this)" style="color:#999"を加えれば、OKです。
blog comments powered by Disqus
このページのTOPへ
フォーム内の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>
このやり方は、同一ページ内に複数の入力フォームがあって、一つ一つのフォームの初期文章が異なっている場合にも、同じ関数で制御可能となるので、非常に便利です。このブログの右ボーダーの中にも、沢山の入力フォームがありますが、関数はこの２つのみ！それぞれの入力フォームにそれぞれのvalue値を放り込んで、最後にonFocus="cText(this)" onBlur="sText(this)" style="color:#999"を加えれば、OKです。
関連記事
blog comments powered by Disqus
