zoukankan      html  css  js  c++  java
  • 新浪微博输入框字数变化

    废话少说,直接上图,然后贴代码

    效果如下图:

    JS代码:

     function count($cur, $zi, $btn) {
            var length = 140 - ($cur.val().replace(/[ ]/g, "").replace(/[u3000]/g, "").replace(/[
    ]/g, "") == "" ? 0 : blength($cur.val()));
            //var length = 140 - $cur.val().length;
            if (length < 0) {
                length = -length;
                //$zi.html(length);
                $zi.html('<%=GetResourceString("Message_Beyond",applicationID)%><font>' + length + '</font><%=GetResourceString("Message_Word", applicationID)%>');
                //$btn.addClass('tn-button-disabled').removeClass('tn-button-primary');
                $btn.css("background-position-x", "0px");
                $btn.css("background-position-y", "-415px");
                $btn.attr("disabled", true);
            }
            else {
                $zi.html(length);
                $zi.html('还能输入<font>' + length + '</font><%=GetResourceString("Message_Word", applicationID)%>');
                if (length == 140) {
                    $btn.css("background-position-x", "0px");
                    $btn.css("background-position-y", "-387px");
                    $btn.attr("disabled", false);  //$btn.addClass('tn-button-disabled').removeClass('tn-button-primary');
                }
                else {
                    $btn.attr("disabled", false);   //$btn.addClass('tn-button-primary').removeClass('tn-button-disabled');
                    $btn.css("background-position-x", "0px");
                    $btn.css("background-position-y", "-387px");
                }
            }
        }
    
        function blength(value) {
            return parseInt((value.replace(/[^x00-xff]/g, "**").length + 1) / 2);
        }  

    前台:

    <form id="microBlogReplyForm_<%=thread.ThreadID %>" method="post" action="<%=SPBUrlHelper.Action("CreateMicroBlogComment2","MicroBlog",new RouteValueDictionary{{"threadID",thread.ThreadID},{"type",(int)CommentType.TopCommnet}}) %>">
    <input oninput='count($(this), $("#zi_<%=thread.ThreadID %>"), $("#commentButton_<%=thread.ThreadID %>"));'  onpropertychange='count($(this), $("#zi_<%=thread.ThreadID %>"), $("#commentButton_<%=thread.ThreadID %>"));' type="text" id="commentArea_<%=thread.ThreadID %>" name="microBlogCommentBody"
        class="sr_text" value="<%=TempData.GetString("CommentBody",string.Empty) %>" />
    <div class="ac_results" id='suggest'>
    </div>
    <div class="pllist_box" style="display: none">
        <h5>
            想提什么问题?</h5>
        <p>
            <a href="#">- 什么是企业?</a></p>
        <p>
            <a href="#">- 什么是中小企业?</a></p>
        <p>
            <a href="#">- 什么是NBA?</a></p>
    </div>
    <div class="clear">
    </div>
    <%--  <%  Html.RenderAction<MicroBlogController>(n => n.Control_SmileySelector("", "commentArea_"));%>--%>
    
    
    <div class="text_sub">
      <%--  <span class="bqiocn">
            <img src="/Themes/Shared/Styles/Images/bq_iocn1.gif" /></span>    --%>  
             <%-- <div class="tn-emotion-button bqiocn">
            <a id="addSmiley_<%=thread.ThreadID %>" href="javascript:;">
                <span class="tn-icon tn-icon-emotion"></span>
            </a>
        </div>--%>
        <span class="bqiocn"  id="addSmiley_selcommentArea_<%=thread.ThreadID %>"> <img class="tn-icon tn-icon-emotion" style="auto;height:auto;" src="/Themes/Shared/Styles/Images/bq_iocn1.gif" /></span>
        <%Html.RenderAction<MicroBlogController>(n => n.Control_SmileySelector("selcommentArea_" + thread.ThreadID, "commentArea_" + thread.ThreadID));%>
        <label class="zf_sub">
            <input type="checkbox" name="microBlogForward" value="1" id="microBlogForward" />同时转发我的微博</label>
        <p class="nubmer" id="zi_<%=thread.ThreadID %>">
            还能输入<font>140</font></p>
        <input type="submit" id="commentButton_<%=thread.ThreadID %>" name="commentButton_<%=thread.ThreadID %>"
            value="评论" class="but1" />
    </div>
    <div class="clear">
    </div>
    <p class="nubmer1"><%=Model.Count()%></p>
    </form>
  • 相关阅读:
    Linux系统服务
    Linux进程管理
    Linux压缩打包
    Linux输入输出
    Linux权限管理
    Linux用户管理
    Linux文件管理
    Linux-Shell
    Centos7 安装jdk1.8
    Python数据分析之路
  • 原文地址:https://www.cnblogs.com/tofight/p/3230506.html
Copyright © 2011-2022 走看看