Question

我有一个图标，当我将鼠标悬停时，它会将焦点设置到输入字段。但是，如果用户点击相同的图标，我还想添加功能，输入字段将获得焦点。

    if(!mobile){
    $('#search-icon').hover( 
        function(){
            if($('.search-area').css('display') == 'none'){
                $('#search-dd').css('display', 'block');
                $('.search-area').css('display', 'block');
                $('.search-input').focus();
            }
        }, function(){
            if($('.search-area').css('display') != 'none') {
            $('#search-dd').css('display', 'none');
            $('.search-area').css('display', 'none');
            }
        });
    $('#search-icon').on('click', function(){

        if($('.search-area').css('display') == 'none'){
            $('#search-dd').css('display', 'block');
            $('.search-area').css('display', 'block');
            $('#search-input').focus();
        }
        else if($('.search-area').css('display') != 'none') {
            $('#search-dd').css('display', 'none');
            $('.search-area').css('display', 'none');
            $('#search-input').focus();
        }
    });
}

当我尝试点击时，我没有焦点。我错过了什么？

Answer 1

如果有人在寻找解决方案，实际上这是一个错字：

＆＃34;在上面的代码中，你有一个＆＃34;搜索输入＆＃34;当你在里面使用它作为id时（点击）。将其更改为$（＆＃34; .search-input＆＃34;）。focus（）;＆＃34;

Answer 2

您可以将您的活动附加到#search-icon，但是当您可以使用html功能时，不需要click事件：

＆＃13;

$('#search-icon').on('hover, mouseover', function() {
    $('#search').focus();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="search" id="search-icon">Icon area: </label>
<input id="search" type="text" />

＆＃13;

悬停和/或单击，自动对焦输入字段

2 个答案: