Javascript如何监听文本域的值发生改变

最新推荐文章于 2024-04-14 10:14:01 发布

chentu279203653csdn

最新推荐文章于 2024-04-14 10:14:01 发布

阅读量2.8k

点赞数

本文链接：https://blog.youkuaiyun.com/chentu279203653csdn/article/details/79169145

版权

本文档介绍如何使用jQuery监听文本输入框的值改变。通过注册focus和blur事件，结合隐藏域存储值来判断文本框内容是否变化，实现异步操作触发条件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、需求：页面的某个文本输入框中的值发生了改变时，触发一个事件；比如做一个异步操作；
二、解决技术问题：如何监听文本输入框的值发生了改变
三、解决方案：
      1.使用jquery开发库；
      2.给文本输入框监听两个事件：blur（失去焦点），focus（获取焦点）；
      3.当文本输入框获取焦点的时候；读取元素的当前值，并存到一个隐藏域中；
      4.当文本输入框失去焦点的时候；读取元素的当前值，和隐藏域中的值进行比较，如果不相等，则做某个操作；实现预想中的监听效果；
四、附上源码：
      （jquery开发库可到官网下载）
       <!DOCTYPE html>
               <html>
                      <head>
                      </head>
                     <body>
                             <p>测试：当文本输入框的内容发生变化时做相关响应</p>
                             <p>
                                     <label>Input something:</label>
                                     <input type="hidden" id="value-store" value=""/>
                                     <input type="text" id="text-field" value=""/>
                             </p>

                             <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
                             <script type="text/javascript">
                                      $(document).ready(function(){
                                               //给文本输入框注册获取焦点事件
                                              $("#text-field").focus(function(){
                                                       //当获取焦点时，把当前存起来
                                                       var currentValue = $(this).val();
                                                       $("#value-store").val(currentValue);
                                               });
                                               //给文本输入框注册失去焦点事件
                                              $("#text-field").blur(function(){
                                 //当失去焦点时，拿当前值和上次获取焦点时的值比较，如果不相等就做相关响应
                                                        var previousValue = $("#value-store").val();//上次获取焦点时的值
                                                        var currentValue = $(this).val();//当前值
                                                       //如果不相等就做相关响应
if(currentValue != previousValue){
alert("文本框的值改变了；上次值："+previousValue+";当前值："+currentValue);
}
});
});
</script>
</body>
</html>