新浪微博输入框字数变化
废话少说,直接上图,然后贴代码
效果如下图:
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>