评论字数统计案例、评论回车发布、 Tab 栏切换、验证码倒计时、显示与隐藏密码——DOM事件

目录

一、DOM事件

1. 评论字数统计案例

2. 评论回车发布

3. Tab 栏切换

4. 验证码倒计时

5. 显示与隐藏密码

一、DOM事件

1. 评论字数统计案例

 

该案例中的显示输入字数及最大字数模块.wrapper  .total 刚开始是看不见的，使用的是不透明度（opacity）（刚开始设置为0）和过渡（transition）来设置的

    当文本域获得焦点，就让 total 显示出来

    当文本域失去焦点，就让 total 隐藏

  
  
  
  
  


  

    
    
    发布
  
  

    0/200字
  
  

    

      
      

        
清风徐来
        
大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]
        
2022-10-10 20:29:21
      
    
  
  

2. 评论回车发布

建议使用 keyup, 防止出现一直按着键盘不松手的情况

注意：等按下回车，结束，清空文本域

问题：1. 当在文本域中输入空格，也会传入给 text，并发布

      补充一个小方法：trim()方法  ：去除左右字符串两侧的空格，但不能去除中间的空格

        如：str = '      pink  i  hhh     '

                console.log( str.trim( ) )   打印得到 'pink i hhh'

        所以使用 trim方法对 textarea 内容去除左右两侧的空格，当其去除后不是空内容时，才能给留言区的text 赋值并显示出来

        2. 按下回车之后，还要把 字符统计  复原

  
  
  
  
  


  

    
    
    发布
  
  

    0/200字
  
  

    

      
      

        
清风徐来
        
大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]
        
2022-10-10 20:29:21
      
    
  
  

3. Tab 栏切换

 

  
  
  
  
  



  

    

      
每日特价
      

        
精选
        
美食
        
百货
        
个护
        
预告
      
    
    

      

      

      

      

      

    
  
  

4. 验证码倒计时

  
  
  
  



  

    

      手机号:
      
    
    

      验证码:
      
      获取验证码
    
  

  

5. 显示与隐藏密码

使用一个flag 变量，当每次点击之后为其取反，作为控制是显示（input）还是隐藏（password）的条件