用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 相关文章推荐
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
json的使用小结
Jun 08 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
vue中英文切换实例代码
Jan 21 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无刷新上传文件实现代码
2011/09/19 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
Python实现比较两个列表(list)范围
2015/06/12 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
python3 enum模块的应用实例详解
2019/08/12 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
四好少年事迹材料
2014/01/12 职场文书
大学军训感言200字
2014/02/26 职场文书
管理标语大全
2014/06/24 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
初中家长意见
2015/06/03 职场文书
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python