新浪微博输入框字数变化

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

效果如下图:

JS代码:

 function count($cur, $zi, $btn) {
        var length = 140 - ($cur.val().replace(/[ ]/g, "").replace(/[\u3000]/g, "").replace(/[\r\n]/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="width: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>

 

posted @ 2013-08-01 17:17  tofight  阅读(294)  评论(0编辑  收藏  举报