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. 使用ASP.NET Core构建RESTful API的技术指南

    译者荐语:利用周末的时间,本人拜读了长沙.NET技术社区翻译的技术标准<微软RESTFul API指南>,打算按照步骤写一个完整的教程,后来无意中看到了这篇文章,与我要写的主题有不少相似之 ...

  2. -bash: warning: setlocale: LC_CTYPE: cannot change locale (zh_CN.UTF-8mb4): No such file or directory

    前几天登录服务器发现出现了这些个警告,一直没时间去处理他,今天难得有空,处理一下并记录下来,希望可以帮助到有需要的朋友. 警告信息如下: Last login: Tue May :: from 192 ...

  3. codewars--js--Hamming Numbers

    问题描述: A Hamming number is a positive integer of the form 2i3j5k, for some non-negative integers i, j ...

  4. EF CORE中复杂类型的映射

    实体映射时,遇到复杂类型,可选择下述方法处理: NotMapped,跳过映射 在复杂类型上声明 [Owned],但仅限该复杂类型是全部由简单值类型组成的 自定义序列化方法   示例: IPInfo使用 ...

  5. Learning hard 网络编程

    1.1网络分层总览 网络上的计算机之所以可以互相通信,是因为它们都遵守着公认的互联网协议,就如同人与人的交流一样,两个人能够交流,就必须知道对方的语言,计算机的网络通信可归结为网络中层与层之间的通信, ...

  6. 修改PR Cs6,PS Cs6,AU Cs6的启动界面

    转载来源:https://jingyan.baidu.com/article/09ea3ede00aeedc0aede39ca.html 百度了很多,只见PS Cs6的启动界面修改教程,PR,AU C ...

  7. Openshift部署流程介绍

    背景 Openshift是一个开源容器云平台,是一个基于主流的容器技术Docker和Kubernetes构建的云平台.Openshift底层以Docker作为容器引擎驱动,以Kubernetes 作为 ...

  8. 小白的linux笔记6:关于挂载硬盘

    每个硬盘,包括移动硬盘,插上之后都会有个名字,如sda,sdb,sdc.... sda,sdb等名字只与插上的顺序有关.而且重启后有可能会发生变化. 查看全部硬盘可以用fdisk -l. df -h  ...

  9. 前后端分离-crud&svn

    前后端分离-crud&svn 1. 跨域 1.1 什么是跨域 请求方与服务方的源不同,即跨域,包括: 1. 协议不同 2. 域名不同 3. 端口不同 1.2 跨域不一定存在跨域问题 什么情况下 ...

  10. 信号处理之DFT、IDFT

    一.DFT之前言部分 由于matlab已提供了内部函数来计算DFT.IDFT,我们只需要会调用fft.ifft函数就行: 二.函数说明: fft(x):计算N点的DFT.N是序列x的长度,即N=len ...