用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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
css样式标签和js语法属性区别
Nov 06 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
DOM 高级编程
May 06 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
vue实现图片上传到后台
Jun 29 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的header和asp中的redirect比较
2006/10/09 PHP
php抓即时股票信息
2006/10/09 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
找到一点可怜的关于dojo资料,谢谢作者!
2006/12/06 Javascript
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
Maps Javascript
2007/01/22 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
JS面向对象编程详解
2016/03/06 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
Python管理Windows服务小脚本
2018/03/12 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
python解包概念及实例
2021/02/17 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
电焊工岗位职责
2014/03/06 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
车间班组长竞聘书
2015/09/15 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python