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. Linux 报错:syntax error "C" 解决办法(此处选择bash系统)

    出现此问题的原因,是由系统的兼容性引起的,linux下默认了指向dash而非bash. linux下Dash改Bash: 1.先查看是使用哪个shell ls -al /bin/sh 2.#如果是Da ...

  2. 将你的Archlinux打造成路由器

    弄了一块J2900双千兆网口的工控板回来(奇怪的型号)当软路由用,无奈我又想各种皮,还想装桌面环境配VNC,而且我还对虚拟机不感冒(况且这U还不支持直通),只得放弃所有路由器系统.作为一名Arch铁粉 ...

  3. 大数四则运算之减法运算-----c语言版

    /* 分三种情况: 1.减数长度大于被减数 交换减数与被减数,输出负号,方便减 2.减数长度等于被减数(分三种情况) a.减数大于被减数,类似1情况1 b.减数等于被减数,两数相等,直接输出0,完成. ...

  4. Keras入门(六)模型训练实时可视化

      在北京做某个项目的时候,客户要求能够对数据进行训练.预测,同时能导出模型,还有在页面上显示训练的进度.前面的几个要求都不难实现,但在页面上显示训练进度当时笔者并没有实现.   本文将会分享如何在K ...

  5. JavaScript 箭头函数(Lambda表达式)

    Lambda表达式(箭头函数)用于表示一个函数,所以它和函数一样,也拥有参数.返回值.函数体,但它没有函数名,所以Lambda表达式相当于一个匿名函数. 使用方法: ()=>{} 小括号里放参数 ...

  6. h5笔记2

    •离线缓存: html配置manifest属性,cache.manifest是缓存配置文件 <html lang="zh-CN" manifest="cache.m ...

  7. php面试笔记(6)-php基础知识-正则表达式考点

    本文是根据慕课网Jason老师的课程进行的PHP面试知识点总结和升华,如有侵权请联系我进行删除,email:guoyugygy@163.com 在面试中,考官往往喜欢基础扎实的面试者,而正则表达式相关 ...

  8. iOS闪退日志的收集和解析

    在开发过程中往往会遇见有个别用户或者测试人员反馈app的闪退现象,而项目一般集成的统计闪退的第三方库是笼统的统计了所有的闪退信息,无法去定位某一个用户提出的某一个时间点的某一个闪退问题,于是乎这个时候 ...

  9. Mac下升级ruby至最新版本

    Mac自身的ruby 版本 2.x,通过ruby -v可以查看版本号. 为更新到ruby的最新版本,可通过以下命令解决: brew update brew install ruby 执行完命令后,ru ...

  10. PHP0026:PHP 博客项目开发3