用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实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
Vue 3.0中jsx语法的使用
Nov 13 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
php延迟静态绑定实例分析
2015/02/08 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
实例讲解PHP表单处理
2019/02/15 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
Dom与浏览器兼容性说明
2010/10/25 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
JavaScript打字小游戏代码
2011/12/26 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
python多线程并发实例及其优化
2019/06/27 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
园林技术个人的自我评价
2014/01/08 职场文书
护士自我介绍信
2014/01/13 职场文书
食品安全工作方案
2014/05/07 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
2014年度个人工作总结
2014/11/07 职场文书
初中学生操行评语
2014/12/26 职场文书
网聊搭讪开场白
2015/05/28 职场文书
python基础之//、/与%的区别详解
2022/06/10 Python