表单事件:
oninput:当用户输入的时候触发。
oninvalid:当验证未通过时触发。
demo.html：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>document</title> <style> form { width: 100%; max-width: 640px; min-width: 320px; margin: 0 auto; font-family: "microsoft yahei"; font-size: 20px; } input { display: block; width: 100%; height: 30px; margin: 10px 0; } </style> </head> <body> <form action="" > <fieldset> <legend>表单事件</legend> <label> 用户名：<input type="text" name="username" id="username"> </label> <label> 密码：<input type="text" name="pwd" id="pwd"> </label> <label> 邮箱：<input type="email" name="email" id="email"> </label> <input type="submit"> </fieldset> </form> </body> <script> //表单事件: oninput:当用户输入的时候触发。 oninvalid:当验证未通过时触发。 var txt1 = document.getelementbyid("username"); var txt2 = document.getelementbyid("pwd"); var txt3 = document.getelementbyid("email"); var num = 0; //oninput:当用户输入的时候触发该事件 txt1.oninput = function() { num++; txt2.value = num; }; //oninvalid:验证不通过时触发该事件 txt3.oninvalid = function() { this.setcustomvalidity("自定义的提示文本"); //设置验证不通过时的提示文本 }; </script> </html>
以上就是详解html5 表单属性的详细内容。