用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利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
$.extend 的一个小问题
Jun 18 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
追求程序速度,而不是编程的速度
2008/04/23 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
phpinfo的知识点总结
2019/10/10 PHP
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
Python中subprocess模块用法实例详解
2015/05/20 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python实现的快速排序算法详解
2017/08/01 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
财务人员的自我评价范文
2014/03/03 职场文书
工程负责人任命书
2014/06/06 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
奔腾年代观后感
2015/06/09 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
java版 简单三子棋游戏
2022/05/04 Java/Android
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技