div失去焦点 vue_jq: 事件-焦点

最新推荐文章于 2024-08-04 18:23:42 发布

weixin_39974958

最新推荐文章于 2024-08-04 18:23:42 发布

阅读量798

点赞数

文章标签： div失去焦点 vue

本文链接：https://blog.csdn.net/weixin_39974958/article/details/112498626

版权

本文探讨了在Vue和jQuery中处理元素聚焦与失焦的事件，包括focus、blur、change、keyup、keydown和keypress等，以及如何使用event.preventDefault()和event.stopPropagation()进行事件控制。

摘要由CSDN通过智能技术生成

focus -> 获得焦点

<input type="text" value="请输入密码">
<script src="../jquery-3.4.1.js"></script>
<script>
 $('input').focus(function() {
     $('input').val('');
 })
</script>

blur -> 失去焦点

$('input').focus(function() {
    $('input').val('');
}).blur(function() {
    $('input').css('color', '#f00')
})

change 失去焦点之后对比是否改动value值

$('input').focus(function() {
 $('input').val('');
 $('input').css('color', '#f00')
        }).blur(function() {
 $('input').css('color', '#f00')
        }).change(function() {
 console.log('值已经更改')
        })

keyup 按下按键后监听

$('input').keyup(function() {
    console.log($('input').val());
})

keydown keypress 按下按键前监听

他们的which属性keydown不区分大小写，keypress区分大小写

scroll() 滚轮

<div class="wrapper">
        <div class="item">0</div>
        <div class="item">1</div>
        <div class="item">2</div>
    </div>
    <script src="../jquery-3.4.1.js"></script>
    <script>
 $(window).scroll(function() {
 if( $(document).scrollTop() + $(window).height() >= $('body').height() ) {
 $('.wrapper').append(`<div class="item">${$('.item').length}</div>`);
            }
        })
    </script>