用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 相关文章推荐
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
canvas 实现中国象棋
Feb 17 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
vue组件与复用详解
Apr 08 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
js实现3D旋转相册
Aug 02 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
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
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
Python中的各种装饰器详解
2015/04/11 Python
python使用append合并两个数组的方法
2015/04/28 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
iPython pylab模式启动方式
2020/04/24 Python
什么是python的必选参数
2020/06/21 Python
python的setattr函数实例用法
2020/12/16 Python
《长城和运河》教学反思
2014/04/14 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
优秀班主任材料
2014/12/16 职场文书
2015年社区工作总结
2015/04/08 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
《绝招》教学反思
2016/02/20 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
MySql开发之自动同步表结构
2021/05/28 MySQL