用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进行目录上传(相当于批量上传)
Dec 05 Javascript
js 获取和设置css3 属性值的实现方法
May 06 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
Angular 容器部署的方法
Apr 17 Javascript
vue实现分页加载效果
Dec 24 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 Javascript
浅谈react useEffect闭包的坑
Jun 08 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获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
python的类方法和静态方法
2014/12/13 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
基于Python的接口测试框架实例
2016/11/04 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
python实现简单井字棋游戏
2020/03/04 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
小学班主任评语大全
2014/04/23 职场文书
门面房租房协议书
2014/08/20 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android