虚拟键盘和调整大小事件答案

【问题标题】：Virtual Keyboard and resize event虚拟键盘和调整大小事件
【发布时间】：2017-10-16 03:21:33
【问题描述】：

1- 我通过单击搜索图标触发了下拉搜索。

// Open/Close Search Form and focus in input search field. THIS IS ON DOM READY !
$('.search-trigger').click(function () {
    $(this).find('i').toggleClass('icon-close', 'icon-search');
    $('.search-dropdown').animate({
        height: 'toggle',
        opacity: 'toggle'
    });
    $('.search-dropdown .search-field').focus();
});

2- 在任何移动设备或标签上，如果单击该图标，将弹出虚拟键盘，因为 $('.search-dropdown .search-field') 已聚焦并且高度 $(window)/$(document) 会改变。

3- 问题：

A-如果我想在调整大小时关闭下拉搜索（当用户更改移动设备或标签的方向时），我可以简单地执行以下操作：

$(window).on('resize', function () { // THE DOM IS READY
    $('.search-trigger .icon-search').removeClass('icon-close');
    $('.search-dropdown').hide();
});

但是因为我知道当用户点击图标时高度会改变我不能这样做A-因为下拉搜索会显示一秒钟并且然后关闭！

B- 因此，为了确保下拉搜索可见，我可以执行以下操作：

// THE DOM IS READY.
var originalWidth = $(window).width();

//CHECK IF THE DROPDOWN SEARCH IS OPENED.
if ($('.icon-close').is(":visible")) {
    $(window).on('resize', function () {

        var newHeight = $(window).height();
        if ($(window).height() === newHeight) {
            $('.search-trigger .icon-search').addClass('icon-close');
            $('.search-dropdown').show();
        }

        if ($(window).width() !== originalWidth) {
            $('.icon-search').removeClass('icon-close');
            $('.search-dropdown').hide();
        }
    });
}

现在代码可以工作了，下拉搜索也可以工作，如果用户改变方向，下拉菜单将被关闭。但是由于宽度不再与原来的宽度相同（用户已更改方向），如果单击搜索图标，下拉搜索将显示一秒钟然后关闭！

如您所见，这很棘手，我尝试了很多变体...
我已经搜索了很多，现在是我寻求帮助的时候了:)

提前感谢您的帮助和建议:)

【问题讨论】：

如果有人经过这里，我已经解决了。将在今晚发布解决方案。 SYA :)

标签： jquery keyboard resize window-resize

【解决方案1】：

下面是完整的代码解释

/*
 * Before opening the Header Search Form,
 * do not waste time by creating jQuery object from window multiple times.
 * Do it just once and store it in a variable.
 * This is done to take care of the performance.
 */ 
var $window = $(window);
var originalHeight = $(window).height();
var originalWidth = $(window).width();
//3. Open/Close Header Search Form
$('.search-trigger').click(function () {
    $(this).find('i').toggleClass('icon-close');
    $('.search-dropdown').animate({
        height: 'toggle',
        opacity: 'toggle'
    });
    // Reset the initial state of the search icon and dropdown
    // Since the height will change when the virtual keybord becomes visible,
    // I don't need to put it inside the resize event and double check it !
    if ($('.icon-close').is(':visible')) {
        if ($window.height() !== originalHeight) {
            $(this).find('i').addClass('icon-close');
            $('.search-dropdown').show();
        }
        $window.resize(function () {
            /* 
             * Do not calculate the new window width twice.
             * Do it just once and store it in a variable.
             */
            var newWidth = $window.width();
            // Do the comparison
            if (originalWidth !== newWidth) {
                // Execute the code
                $('.search-trigger .icon-search').removeClass('icon-close');
                $('.search-dropdown').hide();
                // Reset the width  
                // This is the tricky part that I was misssing :(
                originalWidth = newWidth;
            }
        });
    }
    //  Focus in input search field
    $('.search-dropdown .search-field').focus();
});
// Reset Search Input Value to Search...    
$('input.search-field').val('');

希望这可以帮助解决类似问题的其他人。
赛亚 :)

【讨论】：