Javascript----input事件实现动态监听textarea内容变化

1、代码

<!DOCTYPE html>
<html><head><title>textarea输入文字监听</title>
</head><body><textarea id='text' maxlength="50" style="width: 400px; height: 200px;"></textarea><span id='sp'></span><script type="text/javascript">var val = document.getElementById("text");var tar = document.getElementById('sp');console.log(tar);val.addEventListener("input", function(e) {var t = this.value;console.log(t);if (t.length > 10) {e.returnValue = false;}tar.innerText = (50 - t.length);})</script>
</body></html>

2、效果

3、总结：比较textarea的几个事件，

a、onChange ：鼠标市区焦点的时候触发

b、onInput ： textarea内容改变的时候出发

c、通过监听键盘事件也是存在很多bug的，keyup存在当复制粘贴删除的时候

d、onpropertychange事件ie兼容性不好，can i you都没发找到兼容性信息，

转载于:https://www.cnblogs.com/SunlikeLWL/p/7307212.html

Javascript----input事件实现动态监听textarea内容变化相关推荐

html鼠标离开点击停留,Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)...
本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: ...
java 监听文件内容_java 监听文件内容变化
有时候,我们需要确定某些文件是否有变化而做出一些对应的动作,例如,曾经开发的一款服务器中,由于模块比较多,在运行期间有时候需要单独的输出某个模块日志,但又不可能总是开着日志. log4j中已经实现了可 ...
实时监听输入框值变化的完美方案：oninput onpropertychange
实时监听输入框值变化的完美方案:oninput & onpropertychange 原文:实时监听输入框值变化的完美方案:oninput & onpropertychange 在 W ...
父页面监听iframe路由变化_前端路由原理
对于前端路由应该都很熟悉了,开发过spa应用的应该都用过,只是很少人去查一下前端路由实现的原理. 前端路由的实现核心问题有两个,一个是改变url不刷新,另一个是监听url变化.主要靠的就是hash和h ...
JavaScript巧用Object的get和set方法实现js变量的动态监听
javascript 面向对象系列更新: Javascript面向对象编程之工厂模式.构造函数和ES6的class类 JavaScript 面向对象之Object的getter和setter的使用更 ...
VUE（template标签事件绑定与监听）
一.template标签 Vue.js提供了template标签,可以将指令作用到这个标签上,对其子元素进行渲染,但最后渲染的结果里不会有它. 二.事件绑定与监听 1.方法与内联语句处理器 1)Vue ...
vue动态监听窗口高度 - 全背景banner
vue动态监听窗口高度 - 全背景banner 参考项目文件 src/hr/index.vue [结合下文:第一种方法] 第一种方法:[本文手写代码] data() {return {screenHe ...
zookeeper专题：使用zookeeper客户端实现动态监听节点并获取数据
文章目录 1. zookeeper原生客户端 2. Curator客户端 1. zookeeper原生客户端 zookeeper原生客户端就是zookeeper官方自带的客户端,作为代码与zk服务器交 ...
微信小程序批量获取input的输入值，监听输入框，数据同步
微信小程序批量获取input的输入值,监听输入框,数据同步在使用小程序时,跟vue的数据绑定不一样,没有v-model这个属性了,官网也只是给了一些事件监听. 但是我们如果有多个表单时,需要写多个事 ...

Javascript----input事件实现动态监听textarea内容变化

Javascript----input事件实现动态监听textarea内容变化相关推荐

最新文章

热门文章