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 ...
随机推荐
- Linux 性能分析 工具命令
背景知识:具备背景知识是分析性能问题时需要了解的.比如硬件 cache:再比如操作系统内核.应用程序的行为细节往往是和这些东西互相牵扯的,这些底层的东西会以意想不到的方式影响应用程序的性能,比如某些程 ...
- 用命令提示符运行简单的Java程序报错
首先用记事本写一个最简单的Java代码,我把文件保存在桌面的HelloWorld文件夹中,这里将记事本的名称改为HelloWorld.java public class HelloWorld{ pub ...
- APP图标在线生成
在线生成安卓APP图标生成 图标在线 在线图标 安卓图标 生成图标 https://icon.wuruihong.com/ 在线png图片压缩 png压缩 https://compresspng.c ...
- django 中 cookie与session 相关的知识
cookie :它是一个字典
- 正则表达式过滤html注释内容
Regex.Replace("<!--(.|[\r\n])*?-->",string.Empty)
- C#24种设计模式汇总
创建型:6 01. 简单工厂模式 08. 工厂方法模式 09. 原型模式 13. 建造者模式 15. 抽象工厂模式 21. 单例模式 结构型:7 06. 装饰模式 07. 代理模式 12. 外观模式 ...
- html网页基本结构
<!DOCTYPE> 不是 HTML 标签.它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的. HTML5 DOCTYPE 的 HTML 文档类型如下: <!DOCT ...
- Sercet sharing
Secret Sharing Shamir门限 条件: \(0<k\leq n<p\) \(S<p,p\)是素数 Lagrange插值公式 \[ f(x)=\sum^{k}_{j=1 ...
- ClrFromCSharp_2_2_生成部署打包应用程序
1,在\reps\CSharpFromCSarp\CSharpFromCSarp_2_2,建立新解决方案和解决项目 并且输入以下代码 namespace ClrFromCSharp_2_2 { cla ...
- .net core 3.0配置跨域
1.ConfigureServices services.AddCors(c => { // 配置策略 c.AddPolicy("Policy", policy => ...