2009年06月28日

【備忘】JavaScript: 文字欄位浮水印

JavaScript偶爾會寫一點, 但是老是忘東忘西, 也來備忘一下好了。

效果如下:
有浮水印的文字欄位:

程式碼:
<input name="textfield" type="text"  value="浮水印自訂文字" style="color: #AAAAAA;" onfocus="if (this.value == '浮水印自訂文字') {this.value = ''; this.style.color='#333333'}" onblur="if (this.value == '') {this.value = '浮水印自訂文字'; this.style.color='#AAAAAA'}" >

另外, Flash也可以這樣玩


效果如下:

程式碼(AS3):

// txtfield1 是要放浮水印的目標文字欄位
txtfield1.addEventListener (FocusEvent.FOCUS_OUT, addTextDefault);
txtfield1.addEventListener (FocusEvent.FOCUS_IN, removeTextDefault);

var default_tf = txtfield1.getStyle ("textFormat");

function addTextDefault (e) {
	if (e.currentTarget.text == "") {
		e.currentTarget.setStyle ("textFormat", new TextFormat(null,null,0xAAAAAA));
		e.currentTarget.text = "←請輸入資料";
	}
}
function removeTextDefault (e) {
	if (e.currentTarget.text == "←請輸入資料") {
		e.currentTarget.setStyle ("textFormat", default_tf);
		e.currentTarget.text = "";
	}
}
addTextDefault ({currentTarget:txtfield1});
很短的程式碼, setStyle函式是用來設定組件的樣式

Posted by esabear at 樂多Roodo! │23:57 │回應(0)引用(0)網頁製作
樂多分類:網路/3C 共同主題:教學 工具:編輯本文
標籤:JavaScript,flash
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/9329889