用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常用对话框小集
Sep 13 Javascript
jquery禁用右键示例
Apr 28 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
手把手带你搭建一个node cli的方法示例
Aug 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
PHP4和PHP5共存于一系统
2006/11/17 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
javascript 年月日联动实现核心代码
2009/12/21 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python批量赋值操作实例
2018/10/22 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
keras K.function获取某层的输出操作
2020/06/29 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
高二地理教学反思
2014/01/24 职场文书
庐山导游词
2015/02/03 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
Python绘制分类图的方法
2021/04/20 Python
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers