H5新增表單事件oninput,oninvalid及setCustomValidity設定提示資訊
阿新 • • 發佈：2018-12-22
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action=""> 使用者名稱：<input type="text" name="userName" id="userName"/><br> 電話：<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"/><br> <input type="submit" /> </form> <script type="text/javascript"> /*1.oninput:監聽當前指定元素內容的改變，只要內容改變（新增內容，刪除內容）就會觸發這個事件*/ document.getElementById("userName").oninput=function (){ console.log("oninput:"+this.value); }; /*2.oninvalid:當驗證不通過時觸發 setcustomValidity 設定預設提示資訊*/ document.getElementById("userPhone").oninvalid=function (){ this.setCustomValidity("請輸入合法的11位手機號"); }; /*onkeyup:當鍵盤彈起的時候觸發：每一個鍵的彈起都會出發一次*/ document.getElementById("userName").onkeyup=function (){ console.log("onkeyup:"+this.value); }; </script> </body> </html>