用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和javascript的区别(常用方法比较)
Jul 04 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 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
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
python编程开发之类型转换convert实例分析
2015/11/13 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
Django继承自带user表并重写的例子
2019/11/18 Python
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
药学专业个人的自我评价
2013/12/31 职场文书
网络技术专业推荐信
2014/02/20 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
上诉答辩状范文
2015/05/22 职场文书
红色经典观后感
2015/06/18 职场文书
交通安全温馨提示语
2015/07/14 职场文书
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL