JavaScript onchange 事件

JavaScript onChange 事件可以用在像是 input texttextareaselect optionHTML Form 元素上,當元素內容改變時就觸發 onChange 事件來執行你所準備好的 JavaScript 程式碼,可以應用的範圍相當多,請看以下範例。

JavaScript onChange Event 範例
<script type="text/javascript">
function ShowStr(x){
 var Str=document.getElementById(x).value;
 alert(Str);
}
</script>
請隨意輸入幾個文字:<input type="text" id="Str" onchange="ShowStr(this.id)">
呈現結果

請隨意輸入幾個文字:


在範例中我們先寫了一個 function ShowStr,這個 ShowStr 將會自動抓取網友所填寫的字串內容,範例下方的 input 文字輸入欄位就是要給網友填字用的,填字的時候並不會觸發 onChange Event,填完字後滑鼠移開文字欄位,就會觸發 onChange Event,執行 ShowStr 裡面的程式碼,瀏覽器會開啟一個對話視窗告訴你剛剛所填寫的內容是什麼。

JavaScript onChange 事件還常常拿來製作 select option 跳頁選單,網友在下拉選單中選擇他們想要去的網頁,當選項改變的時候就自動觸發 onChange 事件,將網友帶往他們所選擇的目的地,請參考這篇:JavaScript select onChange 跳頁選單

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C