javascript中的常用表單事件用法
阿新 • • 發佈:2017-05-15
round onload tel logs () case span onsubmit change
下面介紹幾種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>
?
javascript中的常用表單事件用法