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 ...
随机推荐
- chrome报错:您目前无法访问 因为此网站使用了 HSTS
chrome报错:您目前无法访问 因为此网站使用了 HSTS 其然: 现象 :访问github仓库报错'您目前无法访问XXXX 因为此网站使用了 HSTS' 解决方法:清理HSTS的设定,重新获取.c ...
- 物理机安装ESXI6.7提示No Network Adapters的解决方案
下载好ESXI6.7.iso镜像,写入U盘后,提示No Network Adapters,找不到网卡驱动. 解决办法:需要重新封装ESXI,将对应的网卡驱动嵌入进来. 1.先下载VMware-Powe ...
- 基于Travis CI实现 Gitbook在 Github 和 Coding 的同步部署
前言 最近发现自己的博客在使用vpn的情况下打开很慢,百度站点也抓取失败,于是将自己的博客借助hexo-deploy 插件很容易同步部署到了coding上.只需要在你的hexo配置文件_config. ...
- Win10的Python3.8升级与安装
一.前言 1.说明 博主电脑Python3.6用了有3年多了,正好疫情期间有时间,给更新到3.8版本,边安装边记录下安装流程,希望对读者有帮助 2.系统环境 联想电脑,系统Win10,上一个Pytho ...
- JVM类加载器是否可以加载自定义的String
前言 曾经有一次,面试官问到类加载机制,相信大多数小伙伴都可以答上来双亲委派机制,也都知道JVM出于安全性的考虑,全限定类名相同的String是不能被加载的.但是如果加载了,会出现什么样的结果呢?异常 ...
- codewars--js--Simple string expansion+ repeat(),includes()方法
问题描述: Consider the following expansion: solve("3(ab)") = "ababab" -- "ab&qu ...
- pikachu-不安全的文件下载和上传
一.文件下载漏洞 1.1 概述 很多网站都会提供文件下载的功能,即用户可以通过点击下载链接,下载到链接所对应的文件.但是,如果文件下载功能设计不当,则可能导致攻击者可以通过构造文件路径,从而获 ...
- Powershell无文件挖矿查杀方法
病毒现象 服务器出现卡顿.CPU飙升 和其他主机的445端口,建立起大量的连接 存在大量Powershell进程 病毒处置 封堵445端口; 或打永恒之蓝漏洞补丁(https://wukungt.gi ...
- M5310-A 版本
模块外表 型号 BAND M5310-A MBRH0S04 +NB ...
- 理解一致性Hash算法
简介 一致性哈希算法在1997年由麻省理工学院的Karger等人在解决分布式Cache中提出的,设计目标是为了解决因特网中的热点(Hot spot)问题,初衷和CARP十分类似.一致性哈希修正了CAR ...