用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 相关文章推荐
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
解决vue props 拿不到值的问题
Sep 11 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
layer 关闭指定弹出层的例子
Sep 25 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 array_multisort()函数的使用札记
2011/07/03 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
JS判断数组那点事
2017/10/10 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
python实现文本文件合并
2015/12/29 Python
Python使用爬虫猜密码
2016/02/19 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
python实现flappy bird小游戏
2018/12/24 Python
python分数表示方式和写法
2019/06/26 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
python 画图 图例自由定义方式
2020/04/17 Python
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
文明村镇申报材料
2014/05/06 职场文书
售房协议书范本
2015/08/11 职场文书