用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 var声明变量背后的原理示例解析
Oct 12 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
浅谈js中的in-for循环
Jun 28 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 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
深入Nginx + PHP 缓存详解
2013/07/11 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
php压缩文件夹最新版
2018/07/18 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
Python中逗号的三种作用实例分析
2015/06/08 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
Python中整数的缓存机制讲解
2019/02/16 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
python3 实现调用串口功能
2019/12/26 Python
Python @property装饰器原理解析
2020/01/22 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
交通法规咨询中心工作职责
2013/11/27 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
2014年教师节活动总结
2014/08/29 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
管理人员岗位职责
2015/02/14 职场文书
领导干部失职检讨书
2015/05/05 职场文书
导游词之岳阳楼
2019/09/25 职场文书
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python