asp.net 仿腾讯微薄提示 还能输入*个字符 的实现代码

textbox如果设置TextMode="MultiLine"则 它的MaxLength设置的值就无效；为了能达到像腾讯微薄、新浪微薄那样的提示的效果（腾讯和新浪微薄文本框用到的应该是textarea），尝试如果不考虑用鼠标操作粘贴、删除textbox的内容，用jquery的keyup和keydown能实现，下面是实现的一个技巧，用到了js的计时器（当焦点在textbox中则“开启”计时器，失去焦点则“关闭”计时器），很好的解决了鼠标操作粘贴、删除textbox的内容不能改变字符个数的问题
首先在head标记中添加如下js代码
当然还要引用jquery.js,这里知道就好了！


代码如下:

<script>
var t = "";
function maxLimit() {
if ($.trim($("#txtContent").val()).length > 140) {
$("#txtleft").text("已经超出");
$("#LabelContent").text(($.trim($("#txtContent").val()).length) - 140);
}
else {
$("#txtleft").text("还能输入");
$("#LabelContent").text(140 - ($.trim($("#txtContent").val()).length));
}
}
function setTimeouts() {
maxLimit();
t = setTimeout("setTimeouts()", 1 * 10);
};
function clearTimeouts() {
clearTimeout(t);
};
$(document).ready(function() {
//$("#txtContent").keyup(maxLimit);
//$("#txtContent").keydown(maxLimit);
$("#txtContent").bind("blur", clearTimeouts);
$("#txtContent").bind("focus", setTimeouts)
});
</script>

在body编辑中添加


代码如下:

<div> <asp:TextBox ID="txtContent" runat="server" Width="500px" TextMode="MultiLine" MaxLength="140"
Height="100px"></asp:TextBox></div>
<div><span id="txtleft">还能输入</span><asp:Label ID="LabelContent" runat="server" ForeColor="Red"
Text="140"></asp:Label><span>个字符</span></div>

赞 (0)

相关推荐

  • asp.net+js实现的ajax sugguest搜索提示效果

    asp.net+js实现的ajax sugguest搜索提示效果

    效果图: 功能: 1.可以有方向键上下控制. 2.支持关键字高亮.(在该此次代码中省略) 3.对选中可按回车提交. 使用:重点关注id=tbxsearch和id=search_suggest这两个东东.html部分涉及到定位的问题,自己处理好,有问题可以提问,细节自己把握. 注明:在接收的那个文件,其实应该接收一个参数skey的,我先写死了.记得接收的时候先解码一次. 申明:阿会楠根据网上一份原作者不详的代码进行了修改,以适合自己的项目并增加了多个功能.此次放出的代码为基本实现代码,也是最接近原

  • asp.net 页面版文本框智能提示JSCode (升级版)

    原本准备在上一篇中直接修改的,无奈编辑功能太差,打开一堆html代码,空格"&nbsp"都看的人眼花缭乱,只好另开一篇. 升级说明:添加了针对一个界面多个职能提示位置的设定,只需修改文本框onfocus="fnStartInterval(this,'DropDownList2')", 设置好相应的参数即可,同时修复了在IE6下div无法遮盖下拉列表的问题,(IE6下无论如何设置select的z-index或div的z-index属性均无济于事),关于这个就是

  • ASP.NET输入文本框自动提示功能

    在ASP.NET Web开发中会经常用到自动提示功能,比如百度搜索.我们只要输入相应的关键字,就可以自动得到相似搜索关键字的提示,方便我们快速的输入关键字进行查询. 那么在ASP.NET中,如果我们需要做个类似的效果,该如何做到呢? 很简单,我们只要借助于一个JQuery强大的插件JQuery AutoComplete来完成这个效果就可以了.这个插件的官方地址为:JQuery AutoComplete,里面也有示例代码. 下面我们将以一个身份证号自动查询为例,来看看JQuery AutoComp

  • asp.net GridView 删除时弹出确认对话框(包括内容提示)

    asp.net GridView 删除时弹出确认对话框(包括内容提示)

    效果图: html代码 复制代码 代码如下: <table align="center" bgcolor="#c0de98" border="0" cellpadding="0" cellspacing="1" width="99%"> <tr> <th colspan="2"> GridView演示</th> <

  • asp.net checkbox 动态绑定id GridView删除提示

    asp.net checkbox 动态绑定id 复制代码 代码如下: <input id='<%# "courseNo"+Eval("courseNo") %>' type="checkbox" onclick="return Click()"/> GridView删除提示 复制代码 代码如下: <div id="del" onClick="return confir

  • ASP.NET搭配Ajax实现搜索提示功能

    ASP.NET搭配Ajax实现搜索提示功能

    平时的软件开发中,信息的搜索是经常碰到的,增加搜索关键字提示是提高用户体验的一种很好的办法.今天就介绍下在ASP.NET如何利用AJAX来实现搜索的信息提示! 1.需要了解的一些知识点 (1)AJAX对象不同浏览器的创建 不同的浏览器对AJAX(XMLHttpRequest)对象的实现是不一样的,例如IE浏览器是通过ActiveX控件来实现AJAX对象.而其他一些浏览器比如火狐,它将AJAX对象实现成了一个浏览器内部的对象叫XMLHttpRequest,所以不同的浏览器创建AJAX对象的方式也就

  • asp.net运行提示未将对象引用设置到对象的实例错误解决方法

    未将对象引用设置到对象的实例 一.网络上的一般说法 1.ViewState对象为Null. 2.DateSet空. 3.sql语句或Datebase的原因导致DataReader空. 4.声明字符串变量时未赋空值就应用变量. 5.未用new初始化对象. 6.Session对象为空. 7.对控件赋文本值时,值不存在. 8.使用Request.QueryString()时,所获取的对象不存在,或在值为空时未赋初始值. 9.使用FindControl时,控件不存在却没有做预处理. 10.重复定义造成未

  • asp.net Javascript 的几种写法与提示

    asp.net Javascript 的几种写法与提示

    Vs2008环境,上图为先Common.js 复制代码 代码如下: var Common = { Trim: function(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); }, isNumber : function(str) {return /[\d|\.|,]+/.test(str);}, isEmail : function(sEmail) { return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9

  • Asp.Net alert弹出提示信息的几种方法总结

    1.ClientScript.RegisterStartupScript(GetType(),"message","<script>alert('第一种方式,无白屏!');</script>"); 2.HttpContext.Current.Response.Write("<script>alert('第二种方式,有白屏!')</script>"); 3.public static void Sho

  • ASP.NET中的几种弹出框提示基本实现方法

    我们在.NET程序的开发过程中,常常需要和用户进行信息交互,比如执行某项操作是否成功,"确定"还是"取消",以及选择"确定"或"取消"后是否需要跳转到某个页面等,下面是本人对常用对话框使用的小结,希望对大家有所帮助,同时也欢迎大家补充. (1) 点击页面上的按钮,弹出一个对话框提示是"确定"还是"取消"操作,我们采用在按钮中添加属性来完成: 举例如下: 复制代码 代码如下: public

随机推荐