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. android wifi断开原因分析

    最近在解bug的过程中经常遇到密码正确但处于saved的状态,总结原因有已下几种: 1 在ASSOCIATING阶段由于丢包导致ASSOC REJECT 03-16 09:22:12.440 D/Wi ...

  2. pikachu-跨站脚本漏洞(XSS)

    一.跨站脚本漏洞概述 1.1 什么是XSS漏洞?     XSS是一种发生在Web前端的漏洞,其危害的对象也主要是前端用户. 1.2 XSS如何攻击? 二.跨站脚本漏洞类型及测试流程 2.1 跨站脚本 ...

  3. wow.js wow.min.js animate.css animate.min.css

    奉献给下载不到源码的小伙伴,下载到的请忽视 wow.js (function() { var MutationObserver, Util, WeakMap, getComputedStyle, ge ...

  4. symfonos2

    0x01 进入网页 啥也没有 0x02 目录爆破 啥也没有 0x03 端口扫描 知识盲区: ProFTPD 1.3.5 用ProFTPD服务权限执行复制命令,默认在'nobody'用户的特权下运行.通 ...

  5. openlayers6结合geoserver利用WFS服务实现图层新增功能(附源码下载)

    内容概览 1.openlayers6结合geoserver利用WFS服务实现图层新增功能2.源代码demo下载 效果图如下: 本篇主要是openlayers6通过调用geoserver发布的地图服务W ...

  6. ts中类的方法和抽象类

    // 类里面的修饰符 typescript提供三种修饰符 /* public: 公有 在类里面.类外面.子类都可以访问 (默认不加就是public) protected: 保护 在类里面和子类可以访问 ...

  7. npm ERR! Failed at the node-sass@4.13.0 postinstall script

    node-sass 的数据源没设置 npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass 重新 npm in ...

  8. python基础练习,循环、列表、字典、数组

    # encoding: utf-8 ''' @author: mark @file: 20200214.py @time: 2020/2/14 14:21 @software: PyCharm ''' ...

  9. iMacros 入门教程-基础函数介绍(1)

    最近在研究 imacros 这工具,感觉非常强大,简单来说就是自动化对于浏览器的操作,程序自动帮你实现,支持 chrome firefox ie,这样基本就覆盖了99%的人群了吧,甚至他自己也有一个 ...

  10. C# Winform初体验

    设计一个简单的登录窗口,要求输入用户名:小金,密码:123456时候点登录能正确转到另一个窗口. 1.建立窗体应用. 2.这里创建一个login和一个NewForm的窗体. 3.在login的窗体拖拉 ...