专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > JavaScript > 正文

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

作者:鹏仔先生日期:2020-06-03浏览:2092分类:JavaScript

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

平时写搜索功能时候,很多用户喜欢回车搜索,有利于功能体验。  本次简单写个demo,供大家使用。

jq请自行引入

在线运行

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


手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯