前端技术 手机教程
程序开发 平面动画
系统软件 运营推广
CMS教程 在线手册
资源下载 网络安全
精准搜索请尝试:精确搜索

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

2017-08-31 16:22:25 来源:PHP微信公众号开发 作者:ifttt
<!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">
        <div class="weui_cell_bd weui_cell_primary">
        <textarea class="weui_textarea" id="textarea" placeholder="请输入意见反馈" rows="3"></textarea>
        <div class="weui_textarea_counter"><span id="count">0</span>/200</div>
        </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。

分享到:

相关文章

零五科技,分享IT知识,国内顶级IT知识门户网站。

Copyright (C) www.02405.com, All Rights Reserved.

零五科技 版权所有 辽ICP备13002105号-1

//百度 //cnzz