js监听textarea 内容的变化,并计算内容的长度c
html代码如下:
- <div class="customer-message">
- <label for="customerMessage">留言</label>
- <textarea id="customerMessage" maxlength="500o"></textarea>
- <p class="text-count"><span id="textCount">0</span>/500(留言多余10个字)</p>
- </div>
js代码如下:
- window.onload = function () {
- //获取文本内容和长度函数
- function txtCount(el) {
- var val = el.value;
- var eLen = val.length;
- return eLen;
- }
- var el = document.getElementById('customerMessage');
- el.addEventListener('input',function () {
- var len = txtCount(this); // 调用函数
- document.getElementById('textCount').innerHTML = len;
- });
- el.addEventListener('propertychange',function () {//兼容IE
- var len = txtCount(this); // 调用函数
- document.getElementById('textCount').innerHTML = len;
- });
- }
记录如上
js监听textarea 内容的变化,并计算内容的长度c的更多相关文章
- js监听文本框值变化事件,就oninput & onpropertychange & onkeyup & onchange的区别
在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...
- js监听某个元素高度变化来改变父级iframe的高度
最近需要做一个iframe调用其他页面内容,这个iframe地址是可变化的,但是里面的内容高度不确定且里面内容高度可调整,所以需要通过监听iframe里面body的高度变化来调整iframe的高度. ...
- js监听input输入字符变化
<p class="text-input"> <input type="text" id="username" autoC ...
- js监听屏幕的高度变化
之前用VUE写完一个聊天界面,对于ios的效果该优化的地方都已经优化,且已上线.现在因项目需要,在另外一个angularjs+ionic的框架也要写一个聊天页面,目前还在开发中,发现忘记了一些很关键的 ...
- js监听url的hash变化和获取hash值
当浏览器浏览器的url进行变化时,浏览器默认是会去服务器将相应的资源给请求下来的,在不阻止默认行为的前提下,使用给url加锚点的方式(hash模式),让浏览器不跳转. window.addEventL ...
- js -- 监听窗口的大小变化
- js监听文本框内容变化
js监听文本框内容变化 原理很简单,就是在外部先声明一个用来记录input值的变量,然后每0.1秒比较这个值与input的值,如果发生改变,则运行自己的代码,同时改变变量.从而实现对input值改变的 ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
随机推荐
- 杭电--1009 C语言实现
思路:要用有限的猫粮得到最多的javabean,则在房间中得到的javabean比例应尽可能的大. 用一个结构体,保存每个房间中的javabean和猫粮比例和房间号,然后将结构体按比例排序,则从比例最 ...
- 修改centos7容器的时间和宿主机时间一致
一.问题 centos7系统容器时间与宿主机系统时间不一致,就进去查看一番,发现时区和宿主机上的时间不一致,下面就来解决一下 二.现象 1.查看centos宿主机的时间 输入如下命令查看 # date ...
- JS实现斐波那契数列的几种方法
斐波那契数列指的是这样一个数列:1.1.2.3.5.8.13.21.34.…… 前两项为1,从第三项起,每一项等于前两项的和,即F(1)=1,F(2)=1, F(n)=F(n-1)+F(n-2)(n& ...
- NCE L3
单词 课文
- package包
为什么需要package? 为了解决类之间的重名问题.为了方便管理类,合适的类放在合适的包. 怎么用package? 通常是类的第一句非注释性语句. 包名,域名倒着写,加上模块名,并与内部管理类. 命 ...
- codewars--js--vowels counting+js正则相关知识
问题描述: Return the number (count) of vowels in the given string. We will consider a, e, i, o, and u as ...
- C#设计模式学习笔记:(23)解释器模式
本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/8242238.html,记录一下学习过程以备后续查用. 一.引言 今天我们要讲行为型设计模式的第十一个模式-- ...
- c#---Socean.Rpc之EasyProxy
目录 1.高性能RPC框架:Socean.RPC 2.Socean.RPC框架实测 3.Socean.Rpc之EasyProxy 简介 这几天给Socean.RPC加上了动态代理,简称EasyProx ...
- UML之三、建模元素(2)
本章继续介绍建模元素 https://blog.csdn.net/bit_kaki/article/details/78471760 1:边界 任何一个对象都有一个边界,外界只能通过这个边界来认识对象 ...
- Android 调试桥 (adb) 是 命令行命令--官方拷贝过来的,留作自己查看
Android 调试桥 (adb) 是一种功能多样的命令行工具,可让您与设备进行通信.adb 命令便于执行各种设备操作(例如安装和调试应用),并提供对 Unix shell(可用来在设备上运行各种命令 ...