運営サイト/オリジナルCMS   |   ダウンロードランキング   |   お問い合わせ

物件管理CMS(格安の39,800円、無料体験版もあり!)

おかげさまで100社以上の企業様からダウンロードいただきました

物件管理CMS(格安の39,800円、無料体験版もあり!)

不動産物件の掲載・管理・運営に特化したCMS。首都圏不動産公正取引協議会のインターネット広告の適正化に対応しています。

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

JavaScriptを使って、フォーカスを当てると色が変わるフォームを作りました。
方法は2種類で、1つは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, 'MS Pゴシック';
  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:

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

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

コメントをどうぞ

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

運営サイト/オリジナルCMS   |   ダウンロードランキング   |   お問い合わせ