用JS剩余字数计算的代码

先看看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标签内。

赞 (0)

相关推荐

  • js实现多行文本框统计剩余字数功能

    js实现多行文本框统计剩余字数功能

    效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js统计文本框剩余字数</title> <style type="text/css"> #area{ width: 300px; height: 300px; resize:none; } </st

  • 基于JS实现textarea中获取动态剩余字数的方法

    案例介绍:我们常见到有的网站有textarea文本框,当你输入的时候,下面有文字提示还能输入多少个字,今天就是要实现这个功能.当然,由于一个页面有好几个textarea,所以使用单个js逻辑进行控制是不行的,得小小的进行封装一下.当然我的封装还有缺漏,但是基本功能是实现了. 首先介绍下单个textarea实现案例 html部分: <textarea id="text_txt1"></textarea> <span id ="num_txt1&qu

  • js判断文本框剩余可输入字数的方法

    本文实例讲述了js判断文本框剩余可输入字数的方法.分享给大家供大家参考.具体如下: 目的:为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数 JS实现方法 复制代码 代码如下: <html>  <head runat="server">      <title></title>      <script type="text/javascript"> 

  • Javascript实现真实字符串剩余字数提示的实例代码

    复制代码 代码如下: //文本框剩余字数提示(字符大小) function textLimitCheckSj(thisArea, maxLength, SpanId) {     var str = thisArea.value;     if (getChrLen(str, maxLength) > maxLength * 2) {         thisArea.value = str.substring(0, x-1);     }     else {         var vars

  • 用JS剩余字数计算的代码

    先看看HTML代码: <textarea name="description" onkeyup="checkLength(this);"></textarea> <br /><small>文字最大长度: 250. 还剩: <span id="chLeft">250</span>.</small> 可以看出onkeyup是当用户离开键盘后触发的事件,传递的参数是th

  • JS 输入字数判断实现代码

    判断输入的字数 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • jquery限制输入字数,并提示剩余字数实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • js计算时间差代码【包括计算，天，时，分，秒】

    var begintime_ms = Date.parse(new Date(begintime.replace(/-/g, "/"))); //begintime 为开始时间 var endtime_ms = Date.parse(new Date(endtime.replace(/-/g, "/")));   // endtime 为结束时间 得到的结果为 毫秒数,可根据 毫秒数的大小,来判断时间. 当然根据毫秒数 可以根据他们的差值 来求相差的天数或是小时等.

  • Js利用console计算代码运行时间的方法示例

    前言 本文主要给大家介绍了关于Js用console计算代码运行时间的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 需求 如果学习前端一定时间以后,就会考虑性能方面的问题.那么问题来了,我们怎么计算出一段代码的运行时间呢? 使用console.log配合Date对象计算 比如,我们计算sort方法排序十万个随机数组成的数组需要用多长时间的话,可以这么写: var arr = []; for(var i=0; i<100000; i++){ arr.push(Math.

  • js实时监控文本框输入字数的实例代码

    需求:实时监控文本输入框的字数,并加以限制 1.实时监控当前输入字数,直接使用onkeyup事件方法,给输入框加maxlength属性限制长度.如: <div> <textarea id="txt" maxlength="10"></textarea> <p><span id="txtNum">0</span>/10</p> </div> var tx

  • js 求时间差的实现代码

    var date1=new Date();  //开始时间 var date2=new Date();    //结束时间 var date3=date2.getTime()-date1.getTime()  //时间差的毫秒数   //计算出相差天数 var days=Math.floor(date3/(24*3600*1000)) //计算出小时数 var leave1=date3%(24*3600*1000)    //计算天数后剩余的毫秒数 var hours=Math.floor(le

随机推荐