JavaScript 表单事件

黄良钵

分类: 程序开发 54 0

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.         <title>表单事件</title>
  8.         <style>
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <form action="">
  13.             <input type="text" name="" value="">
  14.             <input type="submit" value="提交">
  15.             <input type="reset" value="重置/清空数据">
  16.         </form>
  17.         <script>
  18.             var input = document.querySelector('input[type=text]')
  19.             input.addEventListener('focusin',function(){
  20.                 // focusin获取焦点的时候触发
  21.                 console.log('focusin')
  22.             })
  23.             input.addEventListener('focus',function(){
  24.                 // focus获取焦点的时候触发
  25.                 console.log('focus')
  26.             })
  27.             input.addEventListener('focusout',function(){
  28.                 console.log('focusout')
  29.             })
  30.             input.addEventListener('blur',function(){
  31.                 console.log('blur')
  32.             })
  33.             // focus/blur 支持较好
  34.             // 而focusin和focusout 支持不好(调用顺序不同)
  35.             // focus 指的是获取输入焦点
  36.             // blur 输入焦点离开
  37.             input.addEventListener('change',function(){
  38.                 console.log('change')
  39.             })
  40.             // 文本框失去焦点检查内容 如果内容发生了变化则触发change事件
  41.             // 如果希望在输入时立即检查则应使用其他方式
  42.             input.addEventListener('select',function(){
  43.                 console.log('selectd')
  44.             })
  45.             // 选择输入框内的文本时触发
  46.             document.forms[0].addEventListener('submit',function(e){
  47.                 if(input.value.length>0){
  48.                     alert('可以提交')
  49.                 }
  50.                 else{
  51.                     alert('请输入')
  52.                     e.preventDefault()
  53.                     // 阻止默认事件
  54.                 }
  55.             })
  56.             // submit指表单提交之前 可以在这个事件中检查用户的输入是否合适
  57.             // 如果不合适则可以使用 event 的 preventDefaul() 来阻止表单提交
  58.             document.forms[0].addEventListener('reset',function(e){
  59.                 if(confirm('确定清空表单内容吗?')){
  60.                     // confirm弹出一个确认框 确认框有两个按钮
  61.                     // 点确定时confirm会返回true
  62.                     // 点取消时confirm会返回false
  63.                 }
  64.                 else{
  65.                     e.preventDefault()
  66.                     // 可以阻止表单被清空
  67.                 }
  68.             })
  69.         </script>
  70.     </body>
  71. </html>
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
JavaScript、表单事件

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “JavaScript 表单事件”

Loading...