weui textarea字数限制以及动态显示输入字数的方法(jquery版本)

小Z 2019-08-25 06:54 主机之家测评 | 隐藏边栏 | 抢沙发 | 4 0

文章评分 0 次，平均分 0.0 ：

  <!DOCTYPE html>  <html>  <head>  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel='stylesheet prefetch' href='https://res.wx.qq.com/open/libs/weui/0.3.0/weui.css'>  </head>  <body>  <div class="weui_cells_title">意见反馈</div>  <div class="weui_cells weui_cells_form">  <span style="font-family: Arial, Verdana, sans-serif;">        </span><div class="weui_cell_bd weui_cell_primary">  <span style="font-family: Arial, Verdana, sans-serif;">        </span><textarea class="weui_textarea" id="textarea" placeholder="请输入意见反馈" rows="3"></textarea>  <span style="font-family: Arial, Verdana, sans-serif;">        </span><div class="weui_textarea_counter"><span id="count">0</span>/200</div>  <span style="font-family: Arial, Verdana, sans-serif;">        </span></div>  </div>  <script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>  <script>  $(function(){    var max = 200;    $('#textarea').on('input', function(){       var text = $(this).val();       var len = text.length;       $('#count').text(len);       if(len > max){         $(this).closest('.weui_cell').addClass('weui_cell_warn');       }       else{         $(this).closest('.weui_cell').removeClass('weui_cell_warn');       }    });  })  </script>  </body>  </html>

完整方案，需要引用 jquery。

声明：1、本博客不从事任何主机及服务器租赁业务，不参与任何交易，也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动，信息均摘自网络或来自服务商主动提供；所以对本博客提及的内容不作直接、间接、法定、约定的保证，博客内容也不具备任何参考价值及引导作用，访问者需自行甄别。2、访问本博客请务必遵守有关互联网的相关法律、规定与规则；不能利用本博客所提及的内容从事任何违法、违规操作；否则造成的一切后果由访问者自行承担。3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。4、一旦您访问本博客，即表示您已经知晓并接受了以上声明通告。