JS開發步驟學習筆記
阿新 • • 發佈：2018-11-14
- 確定事件
- 事件要觸發函式: 定義函式
- 函式通常都要去做一些互動: 點選, 修改圖片, 動態修改innerHTML屬性可以編寫程式碼... innerTEXT() 不能編寫程式碼
表單校驗中常用的事件:
獲得焦點事件: onfocus
失去焦點事件 onblur
按鍵擡起事件: onkeyup<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 確認事件 事件觸發函式 函式操作元素 校驗使用者名稱 1. 當用戶滑鼠移動到輸入框中時候, 請給使用者一個提示 事件: 焦點事件 onfocus 觸發函式 函式裡面要做一些事情 span 給使用者提示資訊 2. 當用戶滑鼠移開時候, 校驗一下使用者輸入 事件: 失去焦點 onblur 觸發函式 函式要幹事情: 校驗使用者輸入 得到使用者輸入的值 3. 當用戶按鍵輸入擡起的時候, 校驗一下使用者輸入 --> <script> function showTips(spanID,msg){ var span = document.getElementById(spanID); span.innerHTML = msg; } function checkUsername(){ /* alert(this) 每一個函式中都隱藏著一個this指標, 指向的是當前事件觸發物件 */ var uValue = document.getElementById("username").value; // alert(uValue); var span = document.getElementById("span_username"); if(uValue.length < 6){ span.innerHTML = "對不起,太短啦!" return false; }else{ span.innerHTML = "恭喜您,夠用!" return true; } } function checkForm(){ var flag = checkUsername(); return flag; } </script> </head> <body> <form action="../01-自動輪播圖片/圖片自動輪播.html" onsubmit="return checkForm()"> 使用者名稱:<input type="text" id="username" onblur="checkUsername()" onfocus="showTips('span_username','使用者名稱長度不能小於6位')" /><span id="span_username"></span> <br /> <input type="submit" value="註冊" /> </form> </body> </html>