javascript中的常用表單事件用法

下面介紹幾種javascript中常用的表單事件；

一，onsubmit：表單中的確認按鈕被點擊時發生的事件，如下案例。

案例解析：彈出表單中提交的內容

        <form name="testform" action="#" id="form">
            What is your name?<br />
            <input type="text" name="fname" />
            <input type="submit" value="Submit" />
        </form>
        <script type="text/javascript">
            var form = document.getElementById('form');
            form.onsubmit = function(){
                alert('Hello ' + testform.fname.value +'!');
            }
        </script>

 

二，onblur：在對象失去焦點時發生的事件，如下案例

案例解析：我們將在用戶離開輸入框時執行 JavaScript 代碼

        <p>請輸入你的英文名字: <input type="text" id="fname"></p>
        <p>請輸入你的年齡: <input type="text" id="age"></p>
        <script type="text/javascript">
            function upperCase(){
                var x=document.getElementById("fname").value;
                document.getElementById("fname").value=x.toUpperCase();
            }
            
            var fname = document.getElementById('fname');
            var age = document.getElementById('age');
            fname.onblur = function (){
                upperCase();
            }
            age.onblur = function (){
                alert('age is ' + this.value);
            }
        </script>

 

三，onfoucs：在對象獲得焦點時發生的事件，案例如下

案例解析：當輸入框獲得焦點時，其背景顏色將改變，

        <!--onfoucs事件-->
        <p>第一個：<input type="text" onfocus="setStyle(this.id)" id="fname-foucs"></p>
        <p>第二個：<input type="text" onfocus="setStyle(this.id)" id="lname-foucs"></p>
        <script type="text/javascript">
            function setStyle(x) {
                document.getElementById(x).style.background = "yellow";
            }
        </script>

四，onchange：在對象的值發生改變時觸發的事件，案例如下

案例解析：當輸入框的value值發生改變時將其轉換為大寫

        <!--onchange事件-->
        <p>輸入您的姓名：<input type="text" id="fname-change" onchange="upperCase(this.id)" /></p>
        <script type="text/javascript">
            function upperCase(x) {
                var y = document.getElementById(x).value;
                document.getElementById(x).value = y.toUpperCase();
            }
        </script>

 

五，onload事件：在頁面或者圖片加載完成以后執行的代碼，案例如下：

        <script type="text/javascript">
            window.onload = function(){
                alert('頁面加載已完成，會執行之后的代碼');
            }
        </script>

 

？