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. 解决shiro自定义filter后,ajax登录无法登录,并且无法显示静态资源的问题

    这个问题困扰了我一天,看了下面两个文章,豁然开朗: https://www.cnblogs.com/gj1990/p/8057348.html https://412887952-qq-com.ite ...

  2. MySQL全文索引、联合索引、like查询、json查询速度大比拼

    目录 查询背景 一.like查询 二.json函数查询 三.联合索引查询 四.全文索引查询 结论 查询背景 有一个表tmp_test_course大概有10万条记录,然后有个json字段叫outlin ...

  3. Sap Hana 关于BP的一些理解

    BP里面有角色和角色分组,角色分组相当于包含多个角色. 客户和供应商使用不同的角色来创建. 创建角色和分组前可以创建自定义的角色类别和角色分组类别. 文档:关于BP.note 链接:笔记 作者:明光烁 ...

  4. python基础之字典功能

    python中字典是个很重要的功能,使用键值(key-value)存储,具有极快的查找速度.值得注意的是,字典的key要为不可变对象,比如字符串.字母,但不能是可变的,比如列表等. 1.字典的定义: ...

  5. go微服务框架kratos学习笔记九(kratos 全链路追踪 zipkin)

    目录 go微服务框架kratos学习笔记九(kratos 全链路追踪 zipkin) zipkin使用demo 数据持久化 go微服务框架kratos学习笔记九(kratos 全链路追踪 zipkin ...

  6. 《手把手教你构建自己的 Linux 系统》学习笔记(4)

    汇编链接器(Binutils) 这是一个软件包,这个软件包其实是一个工具集,里面含有了大量的用于汇编程序活着读取二进制文件相关的程序. CC 它是一条命令的别名,这条命令的作用是使用 GCC 的 C ...

  7. vue及vant框架,多语言配置

    1.安装 vue-i18n,( cnpm install vue-i18n --save ) 2.在入口,main.js 中引入 (import Vuei18n from "vue-i18n ...

  8. echarts--可拖动的曲线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Wix 快速开发安装包程序 (二)安装行为

    上一小节,主要介绍了构建最小级别的安装包,这个安装包所做的事情很简单,主要是打包好一些文件,然后放到用户机器的某个位置下面. 这个小节,主要是总结安装过程的各种行为如何使用Wix编写. 一.写注册表 ...

  10. Windows通过DOS命令行设置IP地址

    @rem 设置固定IP地址netsh interface ip set address "本地连接" static 192.168.1.200 255.255.255.0 192. ...