废话少说,直接奔主题吧。
此功能是模拟新浪微博发布时字数限制
看代码吧,一个是纯js 版本 一个是jquery。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title></title><style type="text/css">#txtContent{height: 153px;width: 406px;}</style><!--引入js库--><script src="/ajax/libs/jquery/1.4.2/jquery.min.js"type="text/javascript"></script><script type="text/javascript">// jquery版本/* $(function () {//初始化文本框字数显示var value = $("#top_content").val();var length = value.length;var result = 140 - length;$("#msgbox").html("请文明发言,您可以输入<b>" + result + "</b>字");// 键盘按下事件$("#top_content").keyup(function () {var len = this.value.length;var tmp = 140 - len;if (tmp <= 0) {$("#msgbox").html("请文明发言,已经超过<font color='red'><b>" + (len - 140) + "</b></font>字");} else {$("#msgbox").html("请文明发言,还可以输入<b>" + tmp + "</b>字");}});});*///纯js版本window.onload = function () {//初始化文本框字数显示var top_content = document.getElementById("top_content");var msgbox = document.getElementById("msgbox");var length = top_content.value.length;var result = 140 - length;msgbox.innerHTML = "请文明发言,您可以输入<b>" + result + "</b>字";// 键盘按下事件top_content.onkeyup = function () {var len = this.value.length;var tmp = 140 - len;if (tmp <= 0) {$("#msgbox").html("请文明发言,已经超过<font color='red'><b>" + (len - 140) + "</b></font>字");} else {$("#msgbox").html("请文明发言,还可以输入<b>" + tmp + "</b>字");}}}</script></head><body><p id="msgbox">请文明发言,还可以输入140字</p><textarea id="top_content"></textarea></body></html>