用JS剩余字数计算的代码


Posted in Javascript onJuly 03, 2008

先看看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标签内。

Javascript 相关文章推荐
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
区别JavaScript函数声明与变量声明
Sep 12 Javascript
小程序实现列表删除功能
Oct 30 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
javascript indexOf函数使用说明
Jul 03 #Javascript
复制本贴标题和地址的js代码
Jul 01 #Javascript
js文字滚动停顿效果代码
Jun 28 #Javascript
js兼容标准的表格变色效果
Jun 28 #Javascript
js查找父节点的简单方法
Jun 28 #Javascript
一个小型js框架myJSFrame附API使用帮助
Jun 28 #Javascript
JavaScript 给汉字排序实例代码
Jun 28 #Javascript
You might like
聊天室php&amp;mysql(六)
2006/10/09 PHP
一个MYSQL操作类
2006/11/16 PHP
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
php绘制一条弧线的方法
2015/01/24 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
python文件操作整理汇总
2014/10/21 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
python实现控制台打印的方法
2019/01/12 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
python 实现Harris角点检测算法
2020/12/11 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
2014年道德讲堂实施方案
2014/03/05 职场文书
股权转让意向书
2014/04/01 职场文书
公证书标准格式
2014/04/10 职场文书
政工例会汇报材料
2014/08/26 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
检讨书范文300字
2015/01/28 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
禁毒心得体会范文
2016/01/15 职场文书
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
Python装饰器详细介绍
2022/03/25 Python
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python