{js} onFocus()のシンプルなサンプル。

:focus擬似要素がie系で使えればこんなことjsで書く必要ないのに。
クリックでフォーカスを当てると、classを追加する。



<script type="text/javascript">

function hoge(bar){
	bar.className = "geho01";
}     

</script>
<style>
.geho01 { border:2px #ff0000 dashed; }
</style>

<form name="frm">

<input value="" onFocus="hoge(this)"><br>
<input value="" onFocus="hoge(this)"><br>
<input value="" onFocus="hoge(this)"><br>

</form>

よく調べると、

jQueryにも全く同じイベントが有りました。jQueryはまったく便利です。




<script src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">

jQuery(function(){

	$(".geha").focus(function(){
		$(this).css("background","#ffcc00");
	});
	
	$(".geha").blur(function(){
		$(this).css("background","#ffff00");
	})
})

</script>
<form name="frm">

<input class="geha" value=""><br>
<input class="geha" value=""><br>
<input class="geha" value=""><br>
<textarea class="geha">テキストエリア</textarea>

</form>

カテゴリ:

トラックバック(0)

トラックバックURL: http://www.0yen-coding.com/mt-tb.cgi/260

コメントする

あわせて読みたいブログパーツ