jQuery/JS如何监听input输入框的值-古蔺大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

jQuery/JS如何监听input输入框的值

这篇文章给大家分享的是有关jQuery/JS如何监听input输入框的值的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

我们提供的服务有：网站设计制作、网站制作、微信公众号开发、网站优化、网站认证、宝塔ssl等。为上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的宝塔网站制作公司

input事件：

onchange：

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

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

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

4、onchange 属性可以使用于：, 。</p><pre><script> function change(){ var x=document.getElementById("password"); x.value=x.value.toUpperCase();<br data-filtered="filtered">　　　　console.log("出发了") } </script> </head> <body> 输入你的密码: <input type="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: <input type="text" id="password" oninput="change()"></pre><pre>jQuery： $("#password").on('input propertychange', change);</pre><p><strong>onpropertychange:</strong></p><p>1、会实时触发，会在元素的属性改变时就触发事件。当元素disable=true时不会触发</p><p>2、缺陷：只在IE 下支持，其他浏览器不支持，用oninput来解决。</p><pre><input type="text" id="password" oninput="onpropertychange()"></pre><p><strong>jQuery:</strong></p><pre><!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <input type="text" id="password" autoComplete='off'> <script type="text/javascript"> $(function(){ 　　$('#password').bind('input propertychange', function() { <br data-filtered="filtered">　　　　 console.log('在实时触发！！！') 　　$('#result').html($(this).val().length); <br data-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><script type="text/javascript"> // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9 function OnInput (event) { alert ("The new content: " + event.target.value); } // Internet Explorer function OnPropChanged (event) { if (event.propertyName.toLowerCase () == "value") { alert ("The new content: " + event.srcElement.value); } } </script> <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" /></pre><p>感谢各位的阅读！关于“jQuery/JS如何监听input输入框的值”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！</p> <br> 网站标题：jQuery/JS如何监听input输入框的值 <br> 本文URL：<a href="http://scgulin.cn/article/pgohoh.html">http://scgulin.cn/article/pgohoh.html</a> </div> <div class="hot_new"> <div class="page_title clearfix"> <h3>其他资讯</h3> </div> <div class="news_list clearfix"> <ul> <li> <a href="/article/dhjcc.html">做seo不会写文章怎么办</a> </li><li> <a href="/article/dhgji.html">卫星是什么(北斗卫星对生活的作用)</a> </li><li> <a href="/article/dhghe.html">秦琼是什么人？他的名气为何会如此大？</a> </li><li> <a href="/article/dhjse.html">三国时期曹魏名将王双简介：在诸葛亮北伐期间，被魏延所斩</a> </li><li> <a href="/article/dhgio.html">孝庄文皇后庄妃时期过得怎么样？受宠吗？</a> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>  <div class="footer wow fadeInUp"> <div class="rowFluid"> <div class="span12"> <div class="container"> <div class="footer_content"> <div class="span4 col-xm-12"> <div class="footer_list"> <div class="span6"> <div class="bottom_logo"><img src="/Public/Home/images/ewm.jpg" alt="微信服务号二维码" /></div> </div> <div class="span6 col-xm-12"> <div class="quick_navigation"> <div class="quick_navigation_title">快速导航</div> <ul> <li><a href="http://www.hfwuji.com/" title="成都气球装饰" target="_blank">成都气球装饰</a></li><li><a href="http://chengdu.cdcxhl.com/seo/" title="成都网站优化" target="_blank">成都网站优化</a></li><li><a href="https://www.cdcxhl.com/idc/xixin.html" title="西信服务器托管" target="_blank">西信服务器托管</a></li><li><a href="http://www.pzhseo.com/" title="攀枝花SEO" target="_blank">攀枝花SEO</a></li><li><a href="https://www.cdcxhl.com/seo/chengdu.html" title="四川成都seo网站优化" target="_blank">四川成都seo网站优化</a></li><li><a href="http://m.cdxwcx.com/wenjiang.html" title="温江电信机房" target="_blank">温江电信机房</a></li><li><a href="http://www.cdxwcx.cn/tuoguan/jianyang.html" title="简阳服务器托管" target="_blank">简阳服务器托管</a></li> </ul> </div> </div> </div> </div> <div class="span4 col-xm-6 col-xs-12"> <div class="footer_list"> <div class="footer_link"> <div class="footer_link_title">友情链接</div> <ul id="frientLinks"> <a href="https://www.cdcxhl.com/" title="网站制作" target="_blank">网站制作</a> <a href="https://www.cdcxhl.com/" title="网站建设" target="_blank">网站建设</a> <a href="https://www.cdxwcx.com/tuiguang/" title="成都网络推广" target="_blank">网络推广</a> <a href="http://seo.cdkjz.cn/" title="成都网站推广" target="_blank">网站推广</a> <a href="https://www.cdcxhl.com/xiaochengx.html" title="成都微信小程序开发" target="_blank">小程序开发</a> <a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a> </ul> <div class="footer_link_title">网站建设</div> <ul id="frientLinks"> <li><a href="/">古蔺大橙子建站</a></li> <li><a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a></li> </ul> </div> </div> </div> <div class="span4 col-xm-6 col-xs-12"> <div class="footer_list"> <div class="footer_cotact"> <div class="footer_cotact_title">联系方式</div> <ul> <li><span class="footer_cotact_type">企业：</span><span class="footer_cotact_content">青羊区大橙子信息咨询工作室</span></li> <li><span class="footer_cotact_type">地址：</span><span class="footer_cotact_content">成都市青羊区太升南路288号</span></li> <li><span class="footer_cotact_type">电话：</span><span class="footer_cotact_content"><a href="tel:18980820575" class="call">18980820575</a></span></li> <li><span class="footer_cotact_type">网址：</span><span class="footer_cotact_content"><a href="/" title="古蔺网站建设">www.scgulin.cn</a></span></li> </ul> </div> </div> </div> </div> </div> <div class="copyright"> <p>公司名称：青羊区大橙子信息咨询工作室联系电话：18980820575</p> <p><a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">网站备案号：蜀ICP备2022028542号-27</a></p> <p>古蔺大橙子建站古蔺网站建设古蔺网站设计古蔺网站制作 <a href="http://www.cdxwcx.cn/" target="_blank">成都做网站</a></p> </div> </div> </div> </div> </body> </html> <script> $(".technical_support_box_z_info_box img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>