用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之软键盘实现(js源码)
Jan 30 Javascript
Js动态创建div
Sep 25 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
JavaScript 实现继承的几种方式
Feb 19 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使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
js模糊查询实例分享
2016/12/26 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
js实现随机点名
2021/01/19 Javascript
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
师说教学反思
2014/02/07 职场文书
妇女干部培训方案
2014/05/12 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS