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. mysql 查询指定数据库所有表, 指定表所有列, 指定列所有表 所有外键及索引, 以及索引的创建和删除

    查询指定 数据库 中所有 表 (指定数据库的,所有表) // 可以把 TABLE_NAME 换成 * 号, 查看更丰富的信息 SELECT TABLE_NAME FROM information_sc ...

  2. Vscode开发Java环境搭建

    VSCode 开发 JAVA 微软为 Java 开发者推出了一个 Visual Studio Code 的安装程序.Visual Studio Code 中目前提供了许多 Java 扩展. 该软件包可 ...

  3. 【学习笔记】:JavaScript基础知识超详细总结!

    目录 一.JavaScript的实现 二.JavaScript语言的特点 三.JS与HTML如何结合 四.JS中的数据类型 四.JS的原始数据类型 2.JS的引用数据类型 五.JS引用数据类型之函数 ...

  4. XAML 字符转义

    在 写xaml的使用遇到了一些特殊字符,这里记录一下特殊字符转义.  这些特殊字符遵循用于编码的万维网联合会(W3C) XML 标准. 下表显示这组特殊字符的编码语法: 字符 语法 描述 < & ...

  5. StarUML之四、StarUML的Diagrams(图)与Elements(元素)及相关属性

    Diagrams(图)可以理解为画布  1:创建图 在右侧的Model Explorer管理界面的第一个节点右键,或者选择菜单中Model | Add Diagram | [DiagramType]都 ...

  6. Orleans[NET Core 3.1] 学习笔记(四)( 3 )监控Orleans Silo的方式 OrleansDashboard

    简介 Orleans用起来的确很爽,更爽的是咱们有能监控它的工具. OrleansDashboard 这个工具是一个可视化的Silo监控工具,Silo和Grain的活跃状态一目了然,各个接口的响应速度 ...

  7. 【python数据挖掘】使用词云分析来分析豆瓣影评数据

    概述: 制作词云的步骤: 1.从文件中读取数据 2.根据数据追加在一个字符串里面,然后用jieba分词器将评论分开 3.设置WordCloud词云参数 4.保存最后的结果 数据:使用爬取的豆瓣影评数据 ...

  8. jsx中的路径拼接

    <img style={{height:80,width:80}} src={"/images/"+index+ ".jpg"}/>其中 index ...

  9. cf877D

    题意简述:矩阵中有的点不能走,你每次可从四个方向走,至少走一步,最多走k步(不能横跨那些不能走的格子),问从(sx,sy)走到(tx,ty)的最短时间是多少? 题意:利用set来加速bfs的过程,原理 ...

  10. matlab中的输出显示函数

    matlab中的输出显示函数 在matlab中使用的显示函数有disp.sprintf.fprintf比较常用.下面来介绍一下他们的用法. 1.disp()函数: disp(x)主要是用来输出变量x的 ...