用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 相关文章推荐
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
JS异步宏队列与微队列原理区别详解
Jul 02 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 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
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
Bootstrap基础学习
2015/06/16 Javascript
JS实现的3D拖拽翻页效果代码
2015/10/31 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python高斯消除矩阵
2019/01/02 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
python实现简单五子棋游戏
2019/06/18 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
Python常用数据分析模块原理解析
2020/07/20 Python
任意存:BOXFUL
2018/05/21 全球购物
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
农行实习自我鉴定
2013/09/22 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
寄语学生的话
2014/04/10 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
对公司的意见和建议
2015/06/04 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
mysql left join快速转inner join的过程
2021/06/30 MySQL
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏