jq实现回车搜索事件功能 jq如何来判断input光标是否获取焦点或失去焦点

平时写搜索功能时候,很多用户喜欢回车搜索,有利于功能体验。

本次简单写个demo,供大家使用。

个人前端博客 http://www.sharedblog.cn/?post=214

jq请自行引入

<div>
	<input class="search" type="text" placeholder="请输入搜索内容">
	<button class="submit">搜索</button>
</div>
<script>
    // 监听回车事件
    $(document).keyup(function(event){
        var isFocus = $(".search").is(":focus");
        if(event.keyCode == 13){
    		// 判断光标是否在input上
            if(isFocus == true){
            	// 如果是 则触发点击事件
                $(".submit").click();
            } else {
            	// 不是 则不执行任何事件
            }
        }
    })
    // 搜索执行的事件
    $(".submit").click(function(){
    	alert("触发搜索");
    })
</script>

功能很简单,大家复制粘贴进行测试。

主要判断了回车时,光标是否在input框中,在的话才执行搜索,不在不执行。

 

个人小程序(大家多多支持)

做梦优品

posted @ 2020-03-13 10:34  鹏仔先生  阅读(4)  评论(0)    收藏  举报  来源