- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>HTML5表单设置(重置)提示信息</title>
- </head>
- <body>
- <form action="test.php" method="get">
- 用户名:<input type="text" name="userName" id="userName"/><br>
- 电话:<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"/><br>
- <button>提 交</button>
- </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>
目前评论:1 其中:访客 1 博主 0
评论加载中...
2019年11月18日 22:33 沙发
博主的文章很不错哦~
这里是谙年博客,欢迎回访,友链互换。