change、keypress、input和propertychange

最新推荐文章于 2022-10-24 16:18:33 发布

萧逸才

最新推荐文章于 2022-10-24 16:18:33 发布

阅读量5.2k

点赞数 1

分类专栏：前端 jquery

本文链接：https://blog.csdn.net/xyc_csdn/article/details/70161811

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

jquery

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    change:<input type="text" id="change"><br>
    keypress:<input type="text" id="keypress"><br>
    propertychange:<input type="text" id="propertychange"><br>
    input:<input type="text" id="input"><br>
  </body>
  <script type="text/javascript" src="jquery-3.0.0.min.js"></script>
  <script type="text/javascript">
    $(function(){
      /**
       * a、当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）
       * b、当前对象失去焦点(onblur)
       */
      $("#change").change(function(){
        console.log("change="+$(this).val());
      });

      /**
       * a、keypress/keydown/keyup监听键盘事件，鼠标复制黏贴操作无效
       */
      $("#keypress").keypress(function(){
        console.log("keypress="+$(this).val());
      });

      /**
       * a、input是标准的浏览器事件，一般应用于input元素，当input的value发生变化就会发生，无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化
       * b、propertychange，只要当前对象属性发生改变。
       */
      $("#input").bind("input propertychange",function(){
        console.log("input="+$(this).val());
      });
    });
  </script>
</html>

萧逸才

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
change、keypress、input和propertychange

<!DOCTYPE html><html> <head> <meta charset="utf-8"> </head> <body> change:<input type="text" id="change"><br> keypress:<input type="text" id="keypress"><br> propertychange:<input
复制链接

扫一扫