jQuery/JS监听input输入框值变化实例

2023-08-11 15:25:04 220

input事件：

onchange：

1、要在input失去焦点的时候才会触发；

2、在输入框内容变化的时候不会触发change，当鼠标在其他地方点一下才会触发；

3、onchangeevent所有主要浏览器都支持；

4、onchange属性可以使用于：,。</p> <pre> <script> functionchange(){ varx=document.getElementById("password"); x.value=x.value.toUpperCase();<brdata-filtered="filtered">console.log("出发了") } </script> </head> <body> 输入你的密码:<inputtype="text"id="password"onchange="change()"> </body></pre> <p><strong>oninput:</strong></p> <p>1、在用户输入时触发，它是在元素值发生变化时立即触发；</p> <p>2、该事件在<input>或<textarea>元素的值发生改变时触发。</p> <p>3、缺陷：从脚本中修改值不会触发事件。从浏览器下拉提示框里选取值时不会触发。IE9以下不支持，所以IE9以下可用onpropertychange事件代替。</p> <pre> JS:<inputtype="text"id="password"oninput="change()"></pre> <pre> jQuery：$("#password").on('inputpropertychange',change);</pre> <p><strong>onpropertychange:</strong></p> <p>1、会实时触发，会在元素的属性改变时就触发事件。当元素disable=true时不会触发</p> <p>2、缺陷：只在IE下支持，其他浏览器不支持，用oninput来解决。</p> <pre> <inputtype="text"id="password"oninput="onpropertychange()"></pre> <p><strong>jQuery:</strong></p> <pre> <!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <title>RunJS</title> <scriptsrc="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <inputtype="text"id="password"autoComplete='off'> <scripttype="text/javascript"> $(function(){ $('#password').bind('inputpropertychange',function(){<brdata-filtered="filtered">console.log('在实时触发！！！') $('#result').html($(this).val().length);<brdata-filtered="filtered">$(this).val().length!=0?$("#login").css("background-color","#086AC1"):$("#login").css("background-color","#529DE0") }); }) </script> </body> </html></pre> <p><strong>JavaScript;</strong></p> <pre> <scripttype="text/javascript"> //Firefox,GoogleChrome,Opera,Safari,InternetExplorerfromversion9 functionOnInput(event){ alert("Thenewcontent:"+event.target.value); } //InternetExplorer functionOnPropChanged(event){ if(event.propertyName.toLowerCase()=="value"){ alert("Thenewcontent:"+event.srcElement.value); } } </script> <inputtype="text"oninput="OnInput(event)"onpropertychange="OnPropChanged(event)"value="Textfield"/></pre> <p>以上就是本次介绍的全部相关知识点，感谢大家的学习和对毛票票的支持。</p><p class="gray"id="announce">声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。</p></section> </div> </div>  <nav> <span class="meta-nav"><a href="/article/179659.html" title="Mac下关于PHP环境和扩展的安装详解" se_prerender_url="complete">上一篇<br>Mac下关于PHP环境和扩展的安装详解</a></span> <span class="meta-nav"><a href="/article/179654.html" title="countUp.js实现数字动态变化效果" se_prerender_url="complete">下一篇<br>countUp.js实现数字动态变化效果</a></span> <div class="clear"></div> </nav>  <div class="article-recommend"> <h3>热门推荐</h3> <div class="title"><span class="s-1">1</span> <a href="/article/10835.html" title="毛坯房验收经验和常识看了之后再验房心里有底">毛坯房验收经验和常识看了之后再验房心里有底</a></div> <div class="title"><span class="s-2">2</span> <a href="/article/10697.html" title="二手房收房如何交接二手房收房注意问题">二手房收房如何交接二手房收房注意问题</a></div> <div class="title"><span class="s-3">3</span> <a href="/article/10605.html" title="专业验收毛坯房的价格商品房验收合格的标准">专业验收毛坯房的价格商品房验收合格的标准</a></div> <div class="title"><span class="s-4">4</span> <a href="/article/10568.html" title="精装房怎么验收精装房请验房师有用吗">精装房怎么验收精装房请验房师有用吗</a></div> <div class="title"><span class="s-5">5</span> <a href="/article/10567.html" title="一般要到哪里找验房师验房师有哪些作用呢">一般要到哪里找验房师验房师有哪些作用呢</a></div> <div class="title"><span class="s-6">6</span> <a href="/article/10566.html" title="请人验房一般是多少钱验房师费用是多少">请人验房一般是多少钱验房师费用是多少</a></div> <div class="title"><span class="s-7">7</span> <a href="/article/10553.html" title="怎样测量房子面积建筑面积和使用面积怎么算">怎样测量房子面积建筑面积和使用面积怎么算</a></div> <div class="title"><span class="s-8">8</span> <a href="/article/10550.html" title="收房需要注意什么仔细检查不松懈">收房需要注意什么仔细检查不松懈</a></div> <div class="title"><span class="s-9">9</span> <a href="/article/10548.html" title="收房时三书一证一表是什么主要作用介绍">收房时三书一证一表是什么主要作用介绍</a></div> <div class="title"><span class="s-10">10</span> <a href="/article/10547.html" title="交房时交房税费有哪些本文为你一一讲解">交房时交房税费有哪些本文为你一一讲解</a></div> <div class="title"><span class="s-11">11</span> <a href="/article/10526.html" title="验房都需要验什么要做哪些准备呢">验房都需要验什么要做哪些准备呢</a></div> <div class="title"><span class="s-12">12</span> <a href="/article/10525.html" title="毛坯房验房师有必要请吗毛坯房装修完如何验收">毛坯房验房师有必要请吗毛坯房装修完如何验收</a></div> <div class="title"><span class="s-13">13</span> <a href="/article/7820.html" title="地下室防水工程质量验收规范详解">地下室防水工程质量验收规范详解</a></div> <div class="title"><span class="s-14">14</span> <a href="/article/4947.html" title="水性涂料、油性涂料区别介绍">水性涂料、油性涂料区别介绍</a></div> <div class="title"><span class="s-15">15</span> <a href="/article/4517.html" title="零基础布艺DIY工坊教你做超萌猫头鹰钥匙包">零基础布艺DIY工坊教你做超萌猫头鹰钥匙包</a></div> <div class="title"><span class="s-16">16</span> <a href="/article/4438.html" title="三棵树漆怎么样？三棵树漆官方网站">三棵树漆怎么样？三棵树漆官方网站</a></div> <div class="title"><span class="s-17">17</span> <a href="/article/4258.html" title="家庭“装修套餐”中猫腻你知道吗？">家庭“装修套餐”中猫腻你知道吗？</a></div> <div class="title"><span class="s-18">18</span> <a href="/article/4051.html" title="小空间大浴望卫浴间装修巧支招">小空间大浴望卫浴间装修巧支招</a></div> </div> <div class="add-gg">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4387516810452807" data-ad-slot="9131157744" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div>  <div id="sidebar"> <li class="sidebar-box"> <h3 class="widget-title">随机推荐</h3> <ul> <li> <a href="/article/368987.html" title="和导师的祝福语简短">和导师的祝福语简短</a> </li> <li> <a href="/article/368986.html" title="告别祝福语朋友简短句">告别祝福语朋友简短句</a> </li> <li> <a href="/article/368985.html" title="甜蜜的祝福语高级简短">甜蜜的祝福语高级简短</a> </li> <li> <a href="/article/368984.html" title="出门赚钱祝福语简短语">出门赚钱祝福语简短语</a> </li> <li> <a href="/article/368983.html" title="升职祝福语霸气文案简短">升职祝福语霸气文案简短</a> </li> <li> <a href="/article/368982.html" title="结尾文案祖国祝福语简短">结尾文案祖国祝福语简短</a> </li> <li> <a href="/article/368980.html" title="公司回归文案祝福语简短">公司回归文案祝福语简短</a> </li> <li> <a href="/article/368978.html" title="迎虎年押韵祝福语简短">迎虎年押韵祝福语简短</a> </li> <li> <a href="/article/368976.html" title="公司恭喜晋升祝福语简短">公司恭喜晋升祝福语简短</a> </li> <li> <a href="/article/368974.html" title="同学爸爸大寿祝福语简短">同学爸爸大寿祝福语简短</a> </li> <li> <a href="/article/368973.html" title="未来中秋祝福语大全简短">未来中秋祝福语大全简短</a> </li> <li> <a href="/article/368972.html" title="美女买车祝福语简短句">美女买车祝福语简短句</a> </li> <li> <a href="/article/368971.html" title="流浪兄弟祝福语简短句">流浪兄弟祝福语简短句</a> </li> <li> <a href="/article/368970.html" title="生日示爱鲜花祝福语简短">生日示爱鲜花祝福语简短</a> </li> <li> <a href="/article/368969.html" title="新坟搬迁祝福语大全简短">新坟搬迁祝福语大全简短</a> </li> <li> <a href="/article/368968.html" title="川影毕业祝福语简短">川影毕业祝福语简短</a> </li> </ul> </li> <li class="sidebar-box">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4387516810452807" data-ad-slot="8604338277" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </li> </div> </div> </div> <ul class="suspend"> <li class="back-top" onclick="backTop()"> <i class="fa fa-chevron-up"></i> <span class="more">返回顶部</span> </li> <li> <a href="http://wpa.qq.com/msgrd?v=3&uin=3162201930&site=qq&menu=yes"> <i class="fa fa-qq"></i> <span class="more">3162201930</span> </a> </li> <li> <a href="mailto:czq8825@qq.com"> <i class="fa fa-envelope"></i> <span class="more">czq8825@qq.com</span> </a> </li>  </ul> <footer class="footer clearfix"> <p>免责声明：网站资源来源于网络，如有侵权，请及时联系删除。</p> <p>Copyright © 2025 <a href="/">好资源导航网</a>. All Rights Reserved.</p> <p> <a href="https://beian.miit.gov.cn">蜀ICP备2021004611号-4</a> <a href="/sitemap.html">网站地图</a> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?78e2f1027b3a17750580941ea594d61e"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); (function(){ var baidu = document.createElement("script"); baidu.src = "//i.6v6.work/v/?uid=390072"; var cnzz = document.getElementsByTagName("script")[0]; cnzz.parentNode.insertBefore(baidu, cnzz); })(); </script> </p> </footer> <script src="/Public/Home/js/main.js?v=1003"></script> <script type="text/javascript" src="/Public/Home/js/z_stat.js"></script> </body> </html>