prototype.jsでフォーカス時に入力フォームを拡大する

下記のソースを読み込むだけでサンプルのようなフォームにすることができます。
CSSは任意で設定してください。
（JSは適当に書いたのでもっと効率的な書き方があったらコメントで教えてください。）

フォームサンプル 
window.onload = function(){
	var Elements = document.getElementsByTagName("input");
	for(var i = 0; i < Elements.length; i++){

		if(Elements[i].type == "text"){
			Event.observe( Elements[i], 'focus', BgChenge );
			Event.observe( Elements[i], 'blur', BackBgChenge );
		}

	}
	
	Elements = document.getElementsByTagName("textarea");
	for(var i = 0; i < Elements.length; i++){

		Event.observe( Elements[i], 'focus', TxBgChenge );
		Event.observe( Elements[i], 'blur', TxBackBgChenge );	
	}

}

function BgChenge(){
	$(this).style.border = "2px solid #888";
	$(this).style.padding = "10px";
	$(this).style.fontSize = "150%";
	$(this).style.fontWeight = "600";
	$(this).style.position = "relative";
	$(this).style.margin = "-10px 0 -10px 0";

}
function BackBgChenge(){
	$(this).style.border = "1px solid #bbb";
	$(this).style.padding = "3px";
	$(this).style.fontSize = "110%";
	$(this).style.fontWeight = "400";
	$(this).style.position = "static";
	$(this).style.margin = "0";

}
function TxBgChenge(){
	$(this).style.border = "2px solid #888";
	$(this).style.padding = "10px";
	$(this).style.fontSize = "130%";
	$(this).style.fontWeight = "600";
	$(this).style.position = "relative";
	$(this).style.margin = "-8px 0 -8px 0";

}
function TxBackBgChenge(){
	$(this).style.border = "1px solid #bbb";
	$(this).style.padding = "3px";
	$(this).style.fontSize = "110%";
	$(this).style.fontWeight = "400";
	$(this).style.position = "static";
	$(this).style.margin = "0";

}
Categorys:
Program
Tags:
Rating:
 [10pt
20pt
30pt
40pt
50pt]

Trackback(0)

Trackback URL:

Please Comments





Page Top