html代码如下:

  1.  
    <div class="customer-message">
  2.  
    <label for="customerMessage">留言</label>
  3.  
    <textarea id="customerMessage" maxlength="500o"></textarea>
  4.  
    <p class="text-count"><span id="textCount">0</span>/500(留言多余10个字)</p>
  5.  
    </div>

js代码如下:

  1.  
    window.onload = function () {
  2.  
    //获取文本内容和长度函数
  3.  
    function txtCount(el) {
  4.  
    var val = el.value;
  5.  
    var eLen = val.length;
  6.  
    return eLen;
  7.  
    }
  8.  
     
  9.  
    var el = document.getElementById('customerMessage');
  10.  
    el.addEventListener('input',function () {
  11.  
    var len = txtCount(this); // 调用函数
  12.  
    document.getElementById('textCount').innerHTML = len;
  13.  
    });
  14.  
     
  15.  
    el.addEventListener('propertychange',function () {//兼容IE
  16.  
    var len = txtCount(this); // 调用函数
  17.  
    document.getElementById('textCount').innerHTML = len;
  18.  
    });
  19.  
    }

记录如上

 

js监听textarea 内容的变化,并计算内容的长度c的更多相关文章

  1. js监听文本框值变化事件,就oninput & onpropertychange & onkeyup & onchange的区别

    在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...

  2. js监听某个元素高度变化来改变父级iframe的高度

    最近需要做一个iframe调用其他页面内容,这个iframe地址是可变化的,但是里面的内容高度不确定且里面内容高度可调整,所以需要通过监听iframe里面body的高度变化来调整iframe的高度. ...

  3. js监听input输入字符变化

    <p class="text-input"> <input type="text" id="username" autoC ...

  4. js监听屏幕的高度变化

    之前用VUE写完一个聊天界面,对于ios的效果该优化的地方都已经优化,且已上线.现在因项目需要,在另外一个angularjs+ionic的框架也要写一个聊天页面,目前还在开发中,发现忘记了一些很关键的 ...

  5. js监听url的hash变化和获取hash值

    当浏览器浏览器的url进行变化时,浏览器默认是会去服务器将相应的资源给请求下来的,在不阻止默认行为的前提下,使用给url加锚点的方式(hash模式),让浏览器不跳转. window.addEventL ...

  6. js -- 监听窗口的大小变化

  7. js监听文本框内容变化

    js监听文本框内容变化 原理很简单,就是在外部先声明一个用来记录input值的变量,然后每0.1秒比较这个值与input的值,如果发生改变,则运行自己的代码,同时改变变量.从而实现对input值改变的 ...

  8. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  9. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

随机推荐

  1. JavaScript中,数组和对象的遍历方法总结

    循环遍历是写程序很频繁的操作,JavaScript 提供了很多方法来实现. 这篇文章将分别总结数组和对象的遍历方法,新手可以通过本文串联起学过的知识. 数组遍历 方法一:for 循环 for 循环是使 ...

  2. margin合并及解决办法

    外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者 水平方向不会发生合并 只有普通文档流中块框的垂直外边距才会发生外边距合并 ...

  3. 05.JS函数

    前言: 学习一门编程语言的基本步骤(01)了解背景知识(02)搭建开发环境(03)语法规范(04)常量和变量(05)数据类型(06)数据类型转换(07)运算符(08)逻辑结构(09)函数9.函数——f ...

  4. MySQL基础(4) | 视图

    MySQL基础(4) | 视图 基本语法 1.创建 CREATE VIEW <视图名> AS <SELECT语句> 语法说明如下. <视图名>:指定视图的名称.该名 ...

  5. Android进程调度之adj算法

    copy from : http://gityuan.com/2016/08/07/android-adj/ 一.概述 提到进程调度,可能大家首先想到的是Linux cpu调度算法,进程优先级之类概念 ...

  6. 解决“此Flash Player与您的地区不相容”

    1.进入C:\Windows\System32\drivers\etc目录,将hosts文件拷贝到桌面,然后用文本编辑器,比如记事本,打开,在最后一行添加: 127.0.0.1 geo2.adobe. ...

  7. (三)LoadRunner术语认识

    场景:主要表现为controller中设计与执行测试用例中的用户场景.主要工作有,在controller中选择虚拟用户脚本.设置虚拟用户数量.配置虚拟用户运行时的行为.选择负载发生器.设置执行时间等. ...

  8. CF #622 div.2

    序 ~ieowjf~~ 真的只有老邱在支持我吗(雾 #622 T1 此题做法显然,但是,不知为何,就是会评测机有小问题...无语 上 SingerCoder 的码,不知为何,我的码风总是毒瘤 #inc ...

  9. w13scan扫描器的使用

    0x01 w13scan第三方包下载 环境:python3以上 下载:pip install w13scan 0x02 利用w13scan API接口编写w13scan.py from W13SCAN ...

  10. wondiws+centos 双系统

    任务:在windows下安装CentOS 1.下载CentOS镜像文件,准备一个未格式化的空间. 2.使用UltraISO将要安装的系统写入U盘. 3.用U盘启动,将系统装入一个空的分区下(未格式化) ...