<!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>
H5新增表單事件oninput,oninvalid及setCustomValidity設置提示信息
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
MUI 5+plus 獲取APP根目錄
/* 功能:獲取App根目錄 實例:app.getRoot() 當前訪問路徑：/page/index.html，結果：../ 當前訪問路徑：/page/child/index.html，結果：../.