<!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。
本文为原创文章，版权归主机之家测评所有，欢迎分享本文，转载请保留出处！
