uniapp写出文本域，右下角并限制字数200

在这里插入图片描述
结构
<view class="num">{<!-- -->{ desc.length }}/200</view>
</view>
</code></pre> 
<p>js</p> 
<pre><code>desc: '',
descInput(e) {console.log(e.detail.value.length, '输入的字数')
},
</code></pre> 
<p>样式</p> 
<pre><code>.textarea_box{padding: 20rpx;background-color: #F2F2F2;/deep/ .uni-textarea-textarea{font-size: 28rpx;line-height: 45rpx;}.num{text-align: right;color: gray}
}
</code></pre></div></div><div id="treeSkill"></div></article>
                    
                        <div style="text-align: center;background:#fff;">
   
</div>
                        <ul class="siteitem" style="margin-left:0px;">
                            <li>
                            </li>
                        </ul>

                        <p>本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 162202241@qq.com 举报，一经查实，本站将立刻删除。</p>

                    </div>
                    <div id="vip" style="display:none">
                        <a class="submit" href="http://1313e.com/post/589036.html?action=onClick" rel="nofollow">
                            查看全文
                        </a>
                    </div>
                    <div class="clearfix relsite">
                        <div class="relsite-title"><div>最新评论</div></div>
                        <div class="comment listbox">

                            <ul class="sitelist">

                            </ul>
                        </div>
                    </div>
                    <div class="post tx-comment" id="divCommentPost">
                        <h3><a name="comment"></a><a rel="nofollow" id="cancel-reply" href="#divCommentPost" style="display:none;float:right;"><small>取消回复</small></a>欢迎您发表评论:</h3>
                        <form id="frmSumbit" target="_self" method="post" action="" class="clearfix">
                            <input type="hidden" name="ContentID" id="ContentID" value="589036" />
                            <input type="hidden" name="ParentId" id="ParentId" value="0" />
                                <div class="comment-no-power" style="padding:0;margin-bottom:20px;">
                                    <div class="tips"><p>请登录之后再进行评论</p><div class="btn opacity" onclick="javascript: window.location.href ='/login'">登录</div></div>
                                </div>
                        </form>
                    </div>
                    <div class="clearfix listbox">
                        <div class="relsite-title"><div>相关推荐</div></div>
                        <ul class="sitelist">

                                <li>
        <img src="http://1313e.com/Upload/Gravatar/455.png" class="thumb" style="float:left;" />
        <div class="info">
            <h3>
                <a href="/cate/news"><span>默认分类</span></a>
                <a href="http://1313e.com/post/589035.html">ucharts 秋云 堆叠柱状 条状图</a>
            </h3> 
            <cite>
                <a href="/author/455" style="display:inline-block;color:#999">钮发河</a>
                <span><i class="fa fa-clock-o" aria-hidden="true"></i><span>2023-12-24</span></span>
                <span class="num"><i class="fa fa-eye" aria-hidden="true"></i><span>4 浏览</span> <i class="fa fa-comment" aria-hidden="true"></i><span>0 回复</span></span>
            </cite>
        </div>
    </li>
    <li>
        <img src="http://1313e.com/Upload/Gravatar/630.png" class="thumb" style="float:left;" />
        <div class="info">
            <h3>
                <a href="/cate/news"><span>默认分类</span></a>
                <a href="http://1313e.com/post/589034.html">网络基础理解</a>
            </h3> 
            <cite>
                <a href="/author/630" style="display:inline-block;color:#999">浦蓓</a>
                <span><i class="fa fa-clock-o" aria-hidden="true"></i><span>2023-12-24</span></span>
                <span class="num"><i class="fa fa-eye" aria-hidden="true"></i><span>3 浏览</span> <i class="fa fa-comment" aria-hidden="true"></i><span>0 回复</span></span>
            </cite>
        </div>
    </li>
    <li>
        <img src="http://1313e.com/Upload/Gravatar/1229.png" class="thumb" style="float:left;" />
        <div class="info">
            <h3>
                <a href="/cate/news"><span>默认分类</span></a>
                <a href="http://1313e.com/post/589033.html">本应用使用hbuilderx3.3.11或对应的cli版本编译 而手机端SDK版本是3.3.13。不匹配</a>
            </h3> 
            <cite>
                <a href="/author/1229" style="display:inline-block;color:#999">段宁</a>
                <span><i class="fa fa-clock-o" aria-hidden="true"></i><span>2023-12-24</span></span>
                <span class="num"><i class="fa fa-eye" aria-hidden="true"></i><span>4 浏览</span> <i class="fa fa-comment" aria-hidden="true"></i><span>0 回复</span></span>
            </cite>
        </div>
    </li>
    <li>
        <img src="http://1313e.com/Upload/Gravatar/1449.png" class="thumb" style="float:left;" />
        <div class="info">
            <h3>
                <a href="/cate/news"><span>默认分类</span></a>
                <a href="http://1313e.com/post/589032.html">Iveely 搜索引擎0.3.0 发布  如何搭建自己的搜索引擎</a>
            </h3> 
            <cite>
                <a href="/author/1449" style="display:inline-block;color:#999">沃荔</a>
                <span><i class="fa fa-clock-o" aria-hidden="true"></i><span>2023-12-24</span></span>
                <span class="num"><i class="fa fa-eye" aria-hidden="true"></i><span>7 浏览</span> <i class="fa fa-comment" aria-hidden="true"></i><span>0 回复</span></span>
            </cite>
        </div>
    </li>
    <li>
        <img src="http://1313e.com/Upload/Gravatar/381.png" class="thumb" style="float:left;" />
        <div class="info">
            <h3>
                <a href="/cate/java"><span>java</span></a>
                <a href="http://1313e.com/post/589031.html">java11类和对象</a>
            </h3> 
            <cite>
                <a href="/author/381" style="display:inline-block;color:#999">桑墨</a>
                <span><i class="fa fa-clock-o" aria-hidden="true"></i><span>2023-12-24</span></span>
                <span class="num"><i class="fa fa-eye" aria-hidden="true"></i><span>5 浏览</span> <i class="fa fa-comment" aria-hidden="true"></i><span>0 回复</span></span>
            </cite>
        </div>
    </li>



                        </ul>

                    </div>
                </div>


            </div>
            <div class="homebox-right">

                <div class="sidebar-user-info">
                    <div class="bg" style="background-image: url('/Content/images/bg/11.png');">
                        <div class="avatarimg">
                            <a href="/author/31">
                                <img loading="lazy" src="/Upload/Gravatar/31.png" class="avatar" width="100" height="100" alt="晏欢伯" />
                            </a>
                        </div>
                    </div>

                    <div class="info">
                        <span class="name"><a href="/author/31" target="_blank">晏欢伯</a></span>
                        <span id="jinsom-honor-12944" title="头衔称号" class="mark" style="background:#989898">心想事成</span>
                    </div>


                    <!-- 统计 -->
                    <div class="number">
                        <ul>
                            <li>
                                <a href="javascript:;">
                                    <strong>87</strong>
                                    <span>关注</span>
                                </a>
                            </li>

                            <li>
                                <a href="javascript:;">
                                    <strong>4</strong>
                                    <span>粉丝</span>
                                </a>
                            </li>

                            <li>
                                <a href="javascript:;">
                                    <strong>10</strong>
                                    <span>喜欢</span>
                                </a>
                            </li>

                            <li>
                                <a href="javascript:;">
                                    <strong>86</strong>
                                    <span>内容</span>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <!-- 签到 -->
                    <div class="post">
                        <em>他的最新发布</em>
                        <ul class="newbox-list">
                                <li><a href="http://1313e.com/post/632157.html"><i>1</i>万能分页存储过程</a></li>
                                <li><a href="http://1313e.com/post/631920.html"><i>2</i>海洋工作室——网站建设专家：变形金刚 2 出来了，不错！</a></li>
                                <li><a href="http://1313e.com/post/628821.html"><i>3</i>12.存储类别、链接和内存管理</a></li>
                                <li><a href="http://1313e.com/post/628309.html"><i>4</i>ubuntu上MX4连不上adb的问题解决</a></li>
                                <li><a href="http://1313e.com/post/628133.html"><i>5</i>基于jQuery实现滚动新闻代码下载</a></li>
                                <li><a href="http://1313e.com/post/624652.html"><i>6</i>微信分享页面被重新排版</a></li>
                                <li><a href="http://1313e.com/post/623364.html"><i>7</i>BZOJ4902【CTSC2017】游戏</a></li>
                                <li><a href="http://1313e.com/post/622330.html"><i>8</i>django开发数据库优化措施</a></li>
                                <li><a href="http://1313e.com/post/620472.html"><i>9</i>java内存泄露补充样例</a></li>
                                <li><a href="http://1313e.com/post/619364.html"><i>10</i>废话：我的焦虑</a></li>
                        </ul>
                    </div>
                </div>

                


    <div id="box">
        <div id="float" class="div1">
            <div class="newbox">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title" style="position:inherit;">
                        <li class="layui-this">最新</li>
                        <li>随机</li>
                    </ul>
                    <div class="layui-tab-content" style="padding:10px 0 0 0">
                        <div class="layui-tab-item layui-show"> 
<div class="tip">
    <ul class="newbox-list" style="padding:0">
                <li>
                    <i>1</i>
                    <a href="http://1313e.com/post/632733.html">《HTML5实战》——2.4 利用约束验证API来检查表单输入数据</a>
                </li>
                <li>
                    <i>2</i>
                    <a href="http://1313e.com/post/632732.html">蛋糕上的草莓</a>
                </li>
                <li>
                    <i>3</i>
                    <a href="http://1313e.com/post/632731.html">java常遇到的问题</a>
                </li>
                <li>
                    <i>4</i>
                    <a href="http://1313e.com/post/632730.html">网站策划的九个步骤</a>
                </li>
                <li>
                    <i>5</i>
                    <a href="http://1313e.com/post/632729.html">CHS与LBA之间转换程序</a>
                </li>
                <li>
                    <i>6</i>
                    <a href="http://1313e.com/post/632728.html">一个网站的诞生- MagicDict未来予想図1 [水平分割数据表的构想]</a>
                </li>
                <li>
                    <i>7</i>
                    <a href="http://1313e.com/post/632727.html">Ninject（一）——手动依赖注入</a>
                </li>
                <li>
                    <i>8</i>
                    <a href="http://1313e.com/post/632726.html">pikachu数据连接失败</a>
                </li>
                <li>
                    <i>9</i>
                    <a href="http://1313e.com/post/632725.html">javascript实现二级联动下拉框</a>
                </li>
                <li>
                    <i>10</i>
                    <a href="http://1313e.com/post/632724.html">CountDownLatch与CyclicBarrier的使用与区别</a>
                </li>
    </ul>
</div>
</div>
                        <div class="layui-tab-item">


<div class="tip">
    <ul class="newbox-list" style="padding:0">
                <li>
                    <i>1</i>
                    <a href="http://1313e.com/post/561314.html">每天成长一点点</a>
                </li>
                <li>
                    <i>2</i>
                    <a href="http://1313e.com/post/561315.html">电脑运行cmd命令大全_科普电脑常用的CMD命令</a>
                </li>
                <li>
                    <i>3</i>
                    <a href="http://1313e.com/post/561316.html">彻底删除Oracle</a>
                </li>
                <li>
                    <i>4</i>
                    <a href="http://1313e.com/post/561317.html">ip动态分配_TCP/IP协议的补充知识</a>
                </li>
                <li>
                    <i>5</i>
                    <a href="http://1313e.com/post/561318.html">技术研究与工程开发(转)</a>
                </li>
                <li>
                    <i>6</i>
                    <a href="http://1313e.com/post/561319.html">execl固定表头</a>
                </li>
                <li>
                    <i>7</i>
                    <a href="http://1313e.com/post/561320.html">为什么工作用linux多,不打算从事Linux职业，为何你还要用Linux？</a>
                </li>
                <li>
                    <i>8</i>
                    <a href="http://1313e.com/post/561321.html">源码里没有configure_R4.0的源码安装——以mac为例</a>
                </li>
                <li>
                    <i>9</i>
                    <a href="http://1313e.com/post/561322.html">[转]一些经典的计算机书籍</a>
                </li>
                <li>
                    <i>10</i>
                    <a href="http://1313e.com/post/561323.html">c  如何让程序异常以后继续执行_如何使Nginx支持FastCGI（C/C  ） （支持调用多个FastCGI程序）...</a>
                </li>
    </ul>
</div></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <script>
        //侧栏跟随
        (function () {

            var oDiv = document.getElementById("float");
            var H = 0, iE6;
            var Y = oDiv;
            while (Y) { H += Y.offsetTop; Y = Y.offsetParent };
            iE6 = window.ActiveXObject && !window.XMLHttpRequest;
            if (!iE6) {
                window.onscroll = function () {
                    var s = document.body.scrollTop || document.documentElement.scrollTop;
                    if (s > H) { oDiv.className = "div1 div2"; if (iE6) { oDiv.style.top = (s - H) + "px"; } }
                    else { oDiv.className = "div1"; }
                };
            }

        })();
    </script>

            </div>
        </div>
    </div>

    

<div class="wrapper" style="border-top: 1px solid #FFF;width:100%;padding-top:20px;padding-bottom:20px;">
    <div class="footer">
        <div class="footer-copy">
            Copyright © 2023 - 2024 <a href="http://1313e.com">1313e</a> All Rights Reserved
        </div>
    </div>
    <!--/////////////////////////////////////////////////////////////////
    //                          _ooOoo_                               //
    //                         o8888888o                              //
    //                         88" . "88                              //
    //                         (| ^_^ |)                              //
    //                         O\  =  /O                              //
    //                      ____/`---'\____                           //
    //                    .'  \\|     |//  `.                         //
    //                   /  \\|||  :  |||//  \                        //
    //                  /  _||||| -:- |||||-  \                       //
    //                  |   | \\\  -  /// |   |                       //
    //                  | \_|  ''\---/''  |   |                       //
    //                  \  .-\__  `-`  ___/-. /                       //
    //                ___`. .'  /--.--\  `. . ___                     //
    //              ."" '<  `.___\_<|>_/___.'  >'"".                  //
    //            | | :  `- \`.;`\ _ /`;.`/ - ` : | |                 //
    //            \  \ `-.   \_ __\ /__ _/   .-` /  /                 //
    //      ========`-.____`-.___\_____/___.-`____.-'========         //
    //                           `=---='                              //
    //      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^        //
    //             佛祖保佑       永不宕机      永无BUG                 //
    //             流量上涨       排名上升      权重上升                //
    /////////////////////////////////////////////////////////////////-->


    <script src="/Content/layui/layui.js"></script>
    <script>
        var layedit;
        var editIndex;
        layui.use(['form', 'layer', 'layedit','element'], function () {

            var form = layui.form
                , layer = layui.layer;
             layedit =layui.layedit;
            layedit.set({
                uploadImage: {
                    url: '/services/UpLoadFile', //接口url
                    type: 'post' //默认post
                }
            });

            //创建一个编辑器
             editIndex = layedit.build('txaArticle', {
                tool: ['face','image']
                , height: 150
            });

            $(".layui-layedit>.layui-layedit-tool").append("<i class='layui-icon' id='sub' title='提交' style='float: right; width: auto;background: #0081ff;padding-left: 20px;color: #fff; height: 32px;padding-right: 20px;'>提交</i>");
            $("#sub").click(function () {
                var content = layedit.getContent(editIndex);  //获取html
                if (content == "") {
                    layer.msg('请填写评论内容!', {
                        icon: 5
                    });
                    return;
                }
                $.ajax({
                    url: "http://1313e.com/Services/PostContentComment",    //请求的url地址
                    dataType: "json",   //返回格式为json
                    async: false, //请求是否异步，默认为异步，这也是ajax重要特性
                    data: { "ContentID": $('#ContentID').val(), "ParentId": $('#ParentId').val(), "content": content},
                    type: "post",   //请求方式
                    beforeSend: function () {
                        //请求前的处理
                    },
                    success: function (req) {
                        //请求成功时处理
                        if (req.statusCode == 200) {
                            if (req.message.length > 0) {
                                layer.msg(req.message, {
                                    icon: 6
                                });
                            }
                            else
                            {
                                layer.msg('评价提交成功,本站开启缓存技术请不要重复提交！', {
                                    icon: 6
                                });
                            }
                            layedit.setContent(editIndex,"");
                            $("#relsite-list").after('<ul class="msg">'
                                +'<li class="msgname">'
                                +'<img class="avatar" src="http://www.gravatar.com/avatar/4552069b4224c92de6e3c34d434e3f78?s=80&d=mm&r=g" alt="" width="46">'
                                + '<p class="commentname"><a href="" rel="nofollow" target="_blank">' + req.data.nickName +'</a>  <small>评论于 [' + req.data.CreatedDate+']  <span class="revertcomment"><a href="#comment" class="tx-red"></a></span></small></p>'
                                + '<p class="commentinfo">' + req.data.Description +'<label id="AjaxComment24182"></label></p>'
                                +'</li></ul>')

                        }
                        else {
                            layer.msg('评价提交失败!', {
                                icon: 5
                            });

                        }

                    },
                    complete: function () {
                        //请求完成的处理
                    },
                    error: function () {
                        //请求出错处理
                    }
                });
              
            });
          
        });
    </script>
    <script type="text/javascript">

        $(function () {
            var money = Math.floor(Math.random() * 800 + 100);
            $('#reward-number').val(money);
            $('.reward-money > span > m').text(money);
            if ($.cookie("nickName") != '' && $.cookie("nickName") != null)
            {
                $("#nickName").val($.cookie("nickName"));
            }
            if ($.cookie("email") != '' && $.cookie("email") != null)
            {
                $("#email").val($.cookie("email"));
            }
            if ($.cookie("webSiteUrl") != '' && $.cookie("webSiteUrl") != null) {
                $("#webSiteUrl").val($.cookie("webSiteUrl"));
            }

            $(".pay_item").click(function () {
                $(this).addClass('checked').siblings('.pay_item').removeClass('checked');
                var dataid = $(this).attr('data-id');
                $(".shang_payimg img").attr("src", "http://1313e.com/content/web/images/" + dataid + "img.jpg");
                $("#shang_pay_txt").text(dataid == "alipay" ? "支付宝" : "微信");
            });
            $("#dianzan").click(function () {
                var tip = $(this);
                 $.ajax({
                  url: "http://1313e.com/Services/addArticleFav",    //请求的url地址
                dataType: "json",   //返回格式为json
                async: false, //请求是否异步，默认为异步，这也是ajax重要特性
                data:"id=589036",
                type: "post",   //请求方式
                beforeSend: function () {
                    //请求前的处理
                },
                success: function (req) {
                    //请求成功时处理
                    if (req.statusCode == 200) {
                        $("#thumbs_nomber").text(req.message);
                        $.tipsBox({
                            obj: tip,
                            str: "+1",
                            callback: function () {
                            }
                        });
                    }
                    else {
                        layer.msg('评价提交失败!', {
                            icon: 5
                        });

                    }

                },
                complete: function () {
                    //请求完成的处理
                },
                error: function () {
                    //请求出错处理
                }
            });
            })
            $(".comment .sitelist .info img").click(function () {
               var url = $(this).attr("src");
                var img = "<img src='" + url + "' style='margin: auto; ' /> ";
               layer.open(
                {
                    type:1,
                    shade:false,
                    title:false,
                    area: 'auto',
                    mamin:true,
                    content:img,
                    cancel:function(){}
                }
               )
            })


        });

        
        function commentreply(id, nickname) {
            window.location.href="#divCommentPost"; 
            $("#ParentId").val(id);
            layedit.setContent(editIndex, '@' + nickname +' ');
        }
        function dashangToggle() {
            $(".hide_box").fadeToggle();
            $(".shang_box").fadeToggle();
        }

    </script>
    <script>
        SyntaxHighlighter.all()
    </script>
</body>
</html>