ddc
联网
平面设计 画册 VI欣赏 包装 CG-插画 搜索 个人网页 Alexa排名 CSS 建站资源 下载专区 JS特效 品牌服装 服装院校 专题欣赏 SEO 图标欣赏 专题
广州网站建设 上海网站设计 网站建设 上海网站建设 网站建设 广州网站设计 虚拟主机 域名注册 虚拟主机 广州网站建设 虚拟主机 域名注册 ACG动漫家园 ACG大玩家 上海网站建设 品牌设计 网站建设
网站建设
网站建设
品牌设计
中国设计秀
中国设计秀企业频道
时代网
中资源
当前位置:网站综合首页 >> 网页JS特效 >> 文本特效类 >> 非常实用的效果:用JS计算剩余可用字数

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

来源:中国设计秀    作者:    点击:83     加入收藏    发表评论
0
顶一下

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

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

  效果

  
      文字最大长度: 250. 还剩: 250.

  代码解释

  先看看HTML代码:

以下是引用片段:
<textarea name="description" onkeyup="checkLength(this);"></textarea>  
<br /><small>文字最大长度: 250. 还剩: <span id="chLeft">250</span>.</small>  

  可以看出onkeyup是当用户离开键盘后触发的事件,传递的参数是this(也就是当前所在的文档区域)

  然后结合JS代码看一下:

以下是引用片段:
<script type="text/javascript"> 
function checkLength(which) { 
var maxChars = 250; 
if (which.value.length > maxChars) 
which.value = which.value.substring(0,maxChars); 
var curr = maxChars - which.value.length; 
document.getElementById("chLeft").innerHTML = curr.toString(); 

</script> 

  函数中首先给maxChars变量指定了值(输入区内最多可用的字符数,注意,该变量是个可用于计算的数值)

  然后从参数中得到在textarea中已输入的字符长度,并与前面指定的最大长度做比较。
当输入的字符长度超过范围,则使用substring来强制限制其长度(0,maxChars)的意思就是可输入范围是0个字符到maxChars(变量)个字符。

  var curr = maxChars - which.value.length;的作用是算出还可用多少个字符,将数值保存在curr中。

  最后通过getElementById定位到id为chLeft的对象(在该HTML中为span),并将curr里的值通过toString方法把数值变为字符串,反馈到span标签内。

2006-07-16 14:39:00    出处:网页设计秀收集整理
Google
热点文章/相关文章

音乐
嫁衣 画心 放生 天亮了 牡丹江 那滋味 擦肩而过 怀念过去 北京欢迎你 突然好想你 吻的太逼真 说好的幸福呢 坐上火车去拉萨 没有人比我更爱你
愚爱 心碎 稻香 带我走 醉赤壁 魔杰座 我还想她 明天过后 一定要爱你 等爱的玫瑰 原谅我一次 越单纯越幸福 最后一次的温柔 给我一首歌的时间
白狐 光荣 降临 下雨天 小酒窝 樱花草 恋爱新手 说唱脸谱 红色高跟鞋 寂寞才说爱 深深爱过你 爱上你是个错 即使知道要见面 不是因为寂寞才想你
城府 假如 花海 兰亭序 棉花糖 舍不得 最后一次 女人如烟 外滩十八号 我们的纪念 我们的无奈 心在跳情在烧 爱上你是我的错 爱情里没有谁对谁错
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口