asp.net 仿腾讯微薄提示 还能输入*个字符 的实现代码
更新时间:2021年9月22日 10:19 点击:1310
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>
首先在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>
上一篇: 30 分钟掌握无刷新 Repeater
下一篇: asp.net 分页存储过程实例剖析心得
相关文章
- 今天在写一个vbs的时候,发现中文乱码,后来写好代码正常运行的代码压缩一下给了同事,发现报无效字符,经过验证后发现原来是编码的问题导致,这里就为大家分享一下...2020-06-30
- C# 去除首尾字符或字符串的方法,需要的朋友可以参考一下...2020-06-25
- 正则表达式的作用用来描述字符串的特征。本文重点给大家介绍C# 中使用正则表达式匹配字符的含义,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧...2020-06-25
- 这篇文章主要为大家介绍了R语言进行绘图时输出希腊字符上标,下标及数学公式的实现方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪...2021-11-06
- 这篇文章主要介绍了C语言简单实现计算字符个数的方法,涉及C语言针对字符串的简单遍历与判定技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-04-25
- 这篇文章主要介绍了golang去除多余空白字符(含制表符)的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-04-25
- 这篇文章主要给大家介绍了关于C++ string替换指定字符的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用C++具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-04-25
- 替换指定字符的方法有很多,在本文为大家详细介绍下,JS利用正则配合replace是如何做到的,喜欢的朋友可以参考下...2021-05-07
- 下面小编就为大家带来一篇一个字符串中出现次数最多的字符 统计这个次数【实现代码】。小编觉得挺不错的,现在分享给大家,也给大家做个参考...2016-05-04
- 这篇文章主要介绍了JavaScript字符和ASCII实现互相转换,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-04
- 今天用C#输出XML文件时,发现报错,经过反复检查调试,发现是因为某处内容含有某些特殊字符,这些特殊字符是在XML里不被允许的...2020-11-03
- 下面小编就为大家分享一篇c#实现输出的字符靠右对齐的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-25
- 今天小编就为大家分享一篇C语言实现将字符和数字串到一起,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-04-25
- 这篇文章介绍了C# 格式化字符首字母大写的方法,有需要的朋友可以参考一下...2020-06-25
- 正则表达式,又称正规表示法、常规表示法。这篇文章主要介绍了C#正则表达式转义字符介绍的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了C#实现简单过滤非法字符的方法,涉及C#针对字符串遍历与判断的相关技巧,非常简单实用,需要的朋友可以参考下...2020-06-25
- 1、在建库时,catproc一定要运行,否则用rman时会出现如下字符集的错误: RMAN-00554: initialization of internal recovery manager package failed RMAN-04005: er...2016-11-25
- 在 Windows 有一些字符是不能作为文件名,尝试重命名一个文件,输入/ 就可以看到windows 提示的不能作为文件名的字符,那么具体是包括哪些符号不能作为文件名呢?下面小编给大家介绍下...2020-06-25
两种方法解决javascript url post 特殊字符转义 + & #
本文主要介绍javascript使用url传值的时候数据丢失的问题,希望对大家有所帮助。...2016-04-16- 本文主要介绍了C#中判断字符是否为空的方法,并实测对比各种方法的执行效率,最后推荐大家使用IsNullOrEmpty,效率和易用性比较均衡。...2020-06-25