JavaScriptフォーカス当てると色変わる

JavaScriptを使って、フォーカスを当てると色が変わるフォームを作りました。
方法は２種類で、１つはthis で指定する方法。
もう一つは name属性で指定する方法です。

↓動作サンプル

↓ソースコード

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>サンプルスクリプト</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
 
<style type="text/css">
<!--
body{
  font-size:12px;
  font-family: 'Lucida Grande','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3', verdana, Arial, 'trebuchet ms', sans-serif, 'ＭＳ Ｐゴシック';
  background:#EFEFEF;
}
.text{
  padding:2px;
  font-size:12px;
  border:1px solid #666666;
}
.w300{
  width:300px;
}
.mt20{
  margin-top:20px;
}
p{
  margin:0px;
}
-->
</style>
 
<script type="text/javascript">
<!--
// thisで指定する方法
function form_focus(a) {
  a.style.backgroundColor="#B5CFFF";
}
function form_blur(a) {
  a.style.backgroundColor="#FFFFFF";
}
 
// name属性で指定する方法
function form_focus2(name) {
  form1.elements[name].style.backgroundColor="#FFAE29";
}
function form_blur2(name) {
  form1.elements[name].style.backgroundColor="#FFFFFF";
}
//-->
</script>
 
</head>
<body >
 
<form method="post" name="form1" action="">
<p>↓フォーカスを当てると色が変わる（thisで指定）</p>
<input class="text w300" name="name1" type="text" onblur="form_blur(this)" onfocus="form_focus(this)" value="" />
 
<p class="mt20">↓フォーカスを当てると色が変わる（name属性で指定）</p>
<input class="text w300" name="name2" type="text" onblur="form_blur2('name2')" onfocus="form_focus2('name2')" value="" />
</form>
 
</body>
</html>

参考になりました？

Filed under: JavaScript — admin 13:09 Comments (0)

トラックバック

このエントリーのトラックバックURL:

コメントはまだありません »

この投稿へのコメントの RSS フィード

まだコメントはありません。

コメントをどうぞ

コメントを書くにはログインが必要です。
ログイン

アドボン・ネット -adbon.net-

JavaScriptフォーカス当てると色変わる