2013年8月22日 星期四

[Javacsript] onChange應用


Javascript 的onChange事件的定義為：元素值的內容改變時，執行的Javascript。

而該執行之Javascript定義於onChange="JavascriptCode"，根據w3c的定義支援此三種html標籤：<input type="text"/>, <select>, <textarea>

1、input 、textarea

以下範例為在 input 方塊中 key 入數值，以動態改變 Result 的文字，textarea使用方式雷同，可自行練習看看喔!

提供了另一個相似的例子叫 onKeyUp，這兩者之間有什麼不同呢？操作以下範例即可明白!

範例原始碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>show demo</title>
</head>
<body>
<p>Result:<span id="chgtxt">Text</span></p>
<p><!--onChange: change the Text content dynamically-->
onChange:<input type="text" id="txt1" onChange="funName1(this.id);"/>
</p>
<p>--Similar example--</p>
<p><!--onKeyUp: change the Text content dynamically and word by word -->
onKeyUp:&nbsp;&nbsp;<input type="text" id="txt2" onKeyUp="funName2(this.id);"/>
</p>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
//onchange
function funName1(id) {
$("#chgtxt").text($("#txt1").val());
}
//onkeyup
function funName2(id) {
$("#chgtxt").text($("#txt2").val());
}
</script>
</body>
</html>
view raw javascriptchgtext.html hosted with ❤ by GitHub

範例實作：  
onChange事件發生在離開對話框時，才會改變resule值，而onKeyUp則是隨著input動態改變，可依需求決定要使用哪一種喔 :)

2、select

此範例為根據select選項動態改變字的顏色。

範例原始碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>show demo</title>
</head>
<body>
<!--choose these options to change text color-->
<select onChange="funName(this.value);">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<span id="chgCol">Change Color</span>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function funName(value) {
$("#chgCol").css("color",value);
}
</script>
</body>
</html>
view raw javascriptchgselect.html hosted with ❤ by GitHub
範例實作：


參考資料：
張貼者： 於
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)