虚拟键盘和调整大小事件

Question

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();
        }
    });
}

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

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

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

Answer 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('');

希望这可以帮助遇到类似问题的其他人。
天 :)

虚拟键盘和调整大小事件

Virtual Keyboard and resize event

keyboard

jquery

resize

window-resize