程序开发 JavaScript 表单事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表单事件</title> <style> </style> </head> <body> <form action=""> <input type="text" name="" value=""> <input type="submit" value="提交"> <input type="reset" value="重置/清空数据"> </form> <script> var input = document.querySelector('input[type=text]') input.addEventListener('focusin',function(){ // focusin获取焦点的时候触发 console.log('focusin') }) input.addEventListener('focus',function(){ // focus获取焦点的时候触发 console.log('focus') }) input.addEventListener('focusout',function(){ console.log('focusout') }) input.addEventListener('blur',function(){ console.log('blur') }) // focus/blur 支持较好 // 而focusin和focusout 支持不好(调用顺序不同) // focus 指的是获取输入焦点 // blur 输入焦点离开 input.addEventListener('change',function(){ console.log('change') }) // 文本框失去焦点检查内容 如果内容发生了变化则触发change事件 // 如果希望在输入时立即检查则应使用其他方式 input.addEventListener('select',function(){ console.log('selectd') }) // 选择输入框内的文本时触发 document.forms[0].addEventListener('submit',function(e){ if(input.value.length>0){ alert('可以提交') } else{ alert('请输入') e.preventDefault() // 阻止默认事件 } }) // submit指表单提交之前 可以在这个事件中检查用户的输入是否合适 // 如果不合适则可以使用 event 的 preventDefaul() 来阻止表单提交 document.forms[0].addEventListener('reset',function(e){ if(confirm('确定清空表单内容吗?')){ // confirm弹出一个确认框 确认框有两个按钮 // 点确定时confirm会返回true // 点取消时confirm会返回false } else{ e.preventDefault() // 可以阻止表单被清空 } }) </script> </body> </html>
最新评论
北海の猫
博主您好!技术猫博客最近搬家了,前来通知小主更新一下域名及名称(顺便再来踢个门)
名称:Kitten's Blog
地址:http://blog.skillcat.cn
简介:设计成就梦想,细节成就品质。
图标:http://cn.gravatar.com/avatar/59cb46c14fe1df1292ca09a761b7cbe3
评:留言崔先森
效果真的一般般~
评:Linux QQ全新回归崔先森
deepin.用得挺爽?
评:在荣耀笔记本(Linux版)中拥有深度应用商店,几步就搞定!Jason
[img] /wp-content/uploads/comments/2162/20191017093509309002.jpg[/img] 测试图片上传
评:Vultr怎么解除信用卡绑定?挖站否
评论可以上传图片了?
评:Vultr怎么解除信用卡绑定?delong
中文域名好记
评:留言崔先森
哟,这次主题很牛逼啊~
评:留言saber
和qi一样的想法…
评:jQuery tab选项卡中的瀑布流挖站否
又换域名了?
评:jQuery tab选项卡中的瀑布流xiaomo
懂就是好,会玩
评:宝塔面板使用WebHook 更新nuxt网站