使用jquery的bind来检测textarea，input等的文本变化

最新推荐文章于 2022-06-08 09:37:16 发布
最新推荐文章于 2022-06-08 09:37:16 发布
阅读量585 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dong1528313271/article/details/104912242
版权
本文介绍如何利用jQuery的bind方法来实现textarea、input等元素的文本变化检测，因为在JavaScript原生中onchange事件并不适合实时监听文本更新。文中提供了一个解决方案，通过定时器轮询或使用jQuery的bind方法来触发回调函数。
摘要由CSDN通过智能技术生成
为什么要这样干？

当我需要检测textarea的文本变化，从而触发某一回调的时候，发现js原生的textarea的dom事件onchange是textarea的焦点变更事件回调。所以文本回调呢？

解决方案
  1. 可以自己检查textarea的value文本变化来回调，但是需要定时器轮询。
  2. 使用jq的bind
example
<body>
<input id="line" type="text" placeholder="请输入..." >
<textarea id="area" placeholde
最低0.47元/天 解锁文章
纵使微芒如烟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery编写textarea输入字数限制代码
10-20
如果检测到是IE浏览器，则使用"propertychange"事件，否则使用"input"事件。接着，定义了一个变量maxlength来设定限制的字数长度。 接下来，通过jQuery的bind()函数将事件绑定到textarea元素上。在事件触发时，会...
jQuery文本框(input textare)事件绑定方法教程
01-21
目前1.7以上，jquery​的事件绑定已经用on替换了原来的bind，接下来为大家介绍下bind的使用方法及input textare事件，感兴趣的朋友可以参考下 (1)jquery 绑定事件 目前1.7以上，jquery的事件绑定已经用on替换了原来的bind； 区别：(个人理解)bind是一次绑定事件到每一个子节点；on是只绑定到父节点，然后冒泡到各个子节点； 用法：bind 一个事件，一个方法：$(“.class input”).bind(‘click’,function(e){…;e.stopPropagation;}) 两个事件，一个方法：$(“.class input”).bin
Jquery的bind("input")事件封装，兼容ie8,9
weixin_34303897的博客
03-30 327
使用方法 <body> Input: <input type="text" id="input"><br> <textarea id="log" readonly></textarea> <script src="jquery.min.js"></script> ...
jQuery -- 监听input、textarea输入框值变化
baodaotui4761的博客
04-12 509
$('textarea').bind('inputpropertychange',function(){ if($(".textareachange").val()!=""){ $("#sendbtn").removeClass("disabled"); }else{ $("#sendbtn")....
监听textarea输入文本变化，让textarea高度自增长
weixin_30411819的博客
10-17 392
原本textarea只有一行高，随着输入字数的增多，默认增长，通常会用在移动端产品输入上 使用oninput比onkeyup更适合手机端 <textarea id="txtContent" class="j_comment_in comment-input" rows="1" oninput="ResizeTextarea('txtContent')" style="overflow...
<input>与<textarea>元素的oninput和onchange事件
Spotlight_mar的博客
10-01 2105
oninput事件在 或 元素的值发生改变时触发。 提示： 该事件类似于onchange事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 和 元素。参考地址
Jquery Change与bind事件代码
10-28
在jQuery中，`change`和`bind`都是用于处理事件的函数，但它们的应用场景和使用方式略有不同。首先，让我们详细了解这两个方法。 `change`事件是HTML元素中的一个内置事件，主要针对表单元素，如`<input>`、`...
jQuery封装自定义事件--valuechange(动态的监听input，textarea)之前值，之后值的变化
04-23
这个例子展示了如何使用jQuery创建并订阅一个自定义事件来监听input和textarea元素的值变化。在实际应用中，可以根据项目需求调整和优化这个功能，比如添加debounce或throttle防止频繁触发，或者添加更复杂的验证...
JQ textarea实时监听
周家大小姐
05-24 2111
适用于JQ3.0以下的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...
jQuery实时监听input 输入的值
我有一个魔盒的博客
09-02 1127
$("input[name='imageName']").bind('input propertychange', function() { var a = $("input[name='imageName']").val(); console.log(a); }); 相关连接
jquery监听input值改变
LLG
06-08 1万+
$("input[name=age]").bind('input propertychange',function(){}
jQuery绑定事件的方式总结
ANFO的博客
11-10 614
一.bind()方法绑定事件 首先使用属性选择器获取input标签，然后调用bind方法，传入的第一个参数是要绑定的事件名，第二个参数是事件所调用的函数，这里使用匿名函数作为第二个参数，代码和运行结果如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g...
jQuery 事件中 bind 方法和blur() 方法
叶落无痕的博客
04-24 1万+
1.bind 方法 定义和用法 bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。 自jq版本1.7起，on()方法是被选中元素添加事件处理程序的首选方法 语法 $(selector).bind(event,data,function,map) 参数 描述 event
jquery绑定input的change事件
热门推荐
xiejunna的博客
12-07 5万+
<input style="width: 100%;height: 30px;" id="inputid"/> $(function(){ //输入框的值改变时触发 $("#inputid").on("input",function(e){ //获取input输入的值 console.lo
jQuery中的bind绑定事件与文本框值改变事件解决方法
sollion的专栏
06-25 3万+
一直没什么兴趣看jQuery，就用自己那点不咋样的javascript硬撑着，今天写一个功能时想尝试一下，用bind注册事件时发现怎么都不好使  $("#txtStation").bind("onpropertychange", GetStationLevel);  然后onclick之类的都试了，没一个能用的，无奈去翻jQuery的API，都是鸟语我也看不懂具体说了点了，但是发现
解决JQuery中input的change(onchange)无法触发的问题
ITRider的专栏
11-06 1万+
1.在用div模拟select的情况下，可以使用input.bind('change')，然后在模拟选项被选中后的事件中出发此input的change事件，触发方法input.trigger('change'); 2.使用input.bind('propertychange', function(){your code;}); 这个是input的change事件方法，可以用来实时检测数据，例如是
javascript常用的事件
scratlc的博客
09-25 850
常用的事件主要有:     (1)单击事件:onclick。用户单击鼠标按键时产生的事件，同时。nclick指定的事件处理程序或代码将被调用执行.     (2)改变事件:onchange。当text或textarea元素内的字符值改变或select表格选项状态改变时发生该事件。     (3)选中事件:onselect。当text或textarea对象中的文字被选中时会引发该事件。如:
jQuery -- 监听input、textarea输入框值变化
liayn523的博客
02-16 1万+
使用ionic中ng-change可以监听input的框值变化，但是如果为textarea的话，就没有使用ng-change的事件了，所以在这介绍一个两者兼得的方法： 实时监听输入框值变化的事件：oninput  & onpropertychange ;         在 Web 开发中经常会碰到需要动态监听输入框值变化的情况，如果使用 onkeydown、onkeypress、onke
JQuery事件与动画实战：bind应用与动态样式
"本文主要介绍了JQuery中的事件绑定和动画效果的实现，通过实例代码进行讲解，包括bind事件的使用以及CSS方法动态设置元素样式，同时展示了按钮点击切换内容显示和隐藏的实现方式。" 在JavaScript库JQuery中，事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值