非常实用的效果：用JS计算剩余可用字数

　　用JS计算剩余可用字数

　　输入框允许的字数范围对用户看来并不可见，是个很抽象的东西，JS可以提供给用户一个很直观的数字，让用户控制好使用的字数。

　　*此效果涉及到一点HTML DOM知识和JS知识

　　效果

　　 <br /><small>      文字最大长度: 250. 还剩: <span id="chLeft">250</span>.</small> </p><p>　　<b>代码解释</b></p><p>　　先看看HTML代码：<br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br /><textarea name="description" onkeyup="checkLength(this);"></textarea>   <br /><br /><small>文字最大长度: 250. 还剩: <span id="chLeft">250</span>.</small>  </td></tr></tbody></table></p><p>　　可以看出onkeyup是当用户离开键盘后触发的事件，传递的参数是this(也就是当前所在的文档区域)</p><p>　　然后结合JS代码看一下：<br /><table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr><td style="WORD-WRAP: break-word" bgcolor="#f3f3f3"><font style="FONT-WEIGHT: bold; COLOR: #990000">以下是引用片段：</font><br /><script type="text/javascript">  <br />function checkLength(which) {  <br />var maxChars = 250;  <br />if (which.value.length > maxChars)  <br />which.value = which.value.substring(0,maxChars);  <br />var curr = maxChars - which.value.length;  <br />document.getElementById("chLeft").innerHTML = curr.toString();  <br />}  <br /></script> </td></tr></tbody></table></p><p>　　函数中首先给maxChars变量指定了值(输入区内最多可用的字符数，注意，该变量是个可用于计算的数值)</p><p>　　然后从参数中得到在textarea中已输入的字符长度，并与前面指定的最大长度做比较。<br />当输入的字符长度超过范围，则使用substring来强制限制其长度(0,maxChars)的意思就是可输入范围是0个字符到maxChars(变量)个字符。</p><p>　　var curr = maxChars - which.value.length;的作用是算出还可用多少个字符，将数值保存在curr中。</p><p>　　最后通过getElementById定位到id为chLeft的对象(在该HTML中为span)，并将curr里的值通过toString方法把数值变为字符串，反馈到span标签内。</p> </div> <div class="otlink"> <!-- 相关链接 --> <div class="olinkt"> <h6>关于 <a href='http://www.jztop.com/search/keyword/?keyboard=效果&show=title&tbname=news&tempid=1'>效果</a> <a href='http://www.jztop.com/search/keyword/?keyboard=JS&show=title&tbname=news&tempid=1'>JS</a> <a href='http://www.jztop.com/search/keyword/?keyboard=计算&show=title&tbname=news&tempid=1'>计算</a> <a href='http://www.jztop.com/search/keyword/?keyboard=字数&show=title&tbname=news&tempid=1'>字数</a> 的新闻</h6> </div> <div class="list"> <ul> <li><a title="Photoshop打造美女成暗夜精灵的效果" href="http://www.jztop.com/ps/Photoshop/sl/2006-07-14/22962.html">Photoshop打造美女成暗夜精灵的效果</a></li><li><a title="Photoshop打造质感的土地效果图" href="http://www.jztop.com/ps/Photoshop/sl/2006-07-14/22963.html">Photoshop打造质感的土地效果图</a></li><li><a title="网页特效：CSS + JS 构建的图片查看器" href="http://www.jztop.com/web/css/2006-07-13/22857.html">网页特效：CSS + JS 构建的图片查看器</a></li><li><a title="网页特效实例：用js获取单选按钮的数据" href="http://www.jztop.com/web/javascript/2006-07-13/22854.html">网页特效实例：用js获取单选按钮的数据</a></li><li><a title="用Excel计算个人工资所得税的四套方案" href="http://www.jztop.com/office/Excel/2006-07-12/22789.html">用Excel计算个人工资所得税的四套方案</a></li> </ul> </div> <div align="right" class="font14 plname">【<a href="http://www.jztop.com/e/pl?classid=99&id=22926">评论</a>】【<a href='#fav' onClick='window.external.AddFavorite(location.href, document.title);'>收藏本文</a>】【<a href="/e/DoPrint?classid=99&id=22926" target="_blank">打印</a>】【<a href="javascript:window.close()">关闭</a>】</div> <div class="other_11 font14"> 上一篇文章：<a href='http://www.jztop.com/web/javascript/2006-07-13/22854.html'>网页特效实例：用js获取单选按钮的数据</a> </div> <div class="other_11 font14"> 下一篇文章：<a href='http://www.jztop.com/web/javascript/2006-07-17/23168.html'>Javascript特效：随机显示图片的源代码</a> </div> <div class="other_14"></div> <!-- 评论开始 --> <div class="endCommendNum"> <div class="title"><a href="http://www.jztop.com/e/pl?classid=classid=99&id=22926"><img src="/images/end_p1.gif" alt="讨论区" width="85" height="34" border="0" /></a></div> <div class="pic"> <a href="http://www.jztop.com/e/pl?classid=99&id=22926"><img src="/images/end_details.gif" alt="查看" width="71" height="19" border="0" /></a> </div> <div class="text"> <a href="http://www.jztop.com/e/pl?classid=99&id=22926">已有 <span id="pinglun" class="f_red">0</span> 位对此新闻感兴趣的网友发表了看法</a> </div> </div> <form name=saypl method=post action="http://www.jztop.com/e/enews/index.php" onsubmit="return CheckPl(document.saypl)" style="margin:0px;padding:0px;"> <div class="textBox"> <textarea name="saytext" id="saytext">