Как определить, было ли событие изменения размера запущено с помощью мягкой клавиатуры в мобильном браузере?

Ответ 1

Недавно я столкнулся с некоторыми проблемами, требующими проверки. Мне удалось решить его так:

$(window).on('resize', function(){
   // If the current active element is a text input, we can assume the soft keyboard is visible.
   if($(document.activeElement).attr('type') === 'text') {
      // Logic for while keyboard is shown
   } else {
      // Logic for while keyboard is hidden
   }
}

Мне это нужно только для текстовых входов, но, очевидно, это можно было бы развернуть для любого элемента, который может запускать программную клавиатуру и набор цифр и т.д.

Ответ 2

Я только что установил ответ kirisu_kun для использования prop() вместо attr():

$(window).on('resize', function(){
   // If the current active element is a text input, we can assume the soft keyboard is visible.
   if($(document.activeElement).prop('type') === 'text') {
      // Logic for while keyboard is shown
   } else {
      // Logic for while keyboard is hidden
   }
}

Ответ 3

Как и в предыдущем ответе, но нацелен на всех детей формы с фокусом (очевидно, сбой на входах без родительской формы)

$(window).resize(function() {
    if($('form *').focus()) {
        alert('ignore this');
    } else {
        // do the thing
    }
});

Так что, возможно, это...

$(window).resize(function() {
    if($('input, select, etc').focus()) {
        alert('ignore this');
    } else {
        // do the thing
    }
});

Ответ 4

Проблема в том, что если активный элемент сфокусирован, вы можете вызвать событие изменения размера, просто закрыв клавиатуру, не изменяя фокус. Таким образом, клавиатура будет скрыта, но код войдет в состояние фокуса.

Ответ 5

Я искал решение аналогичной проблемы. Событие с изменением размера запускалось при входе и выходе из URL-адреса. Это то, над чем я работал... Может быть, возможно решение?

Итак, в основном вы просто проверяете, изменилась ли только ширина экрана или нет, и только стреляйте своими функциями при изменении размера, если они разные:

например:

var saveWindowWidth = true;
    var savedWindowWidth;

//set the initial window width
    if (saveWindowWidth = true){
        savedWindowWidth = windowWidth;
        saveWindowWidth = false;
    }


//then on resize...


$(window).resize(function() {

//if the screen has resized then the window width variable will update
        windowWidth = window.innerWidth;


//if the saved window width is still equal to the current window width do nothing
        if (savedWindowWidth == windowWidth){
            return;
        }


//if saved window width not equal to the current window width do something
        if(savedWindowWidth != windowWidth) {
           // do something

            savedWindowWidth = windowWidth;
        }

    });

Ответ 6

Есть несколько вещей, которые нужно сконцентрироваться на

• Все программные клавиатуры влияют только на высоту, а не на ширину.
• Теги элементов фокуса могут быть либо входными, либо текстовыми.
• Высота будет уменьшаться, когда элемент будет сфокусирован (или) высота будет увеличена при фокусировке.

Вы можете использовать эти комбинации при изменении размера браузера

function getWidth(){
return $( window ).width();
}

function getHeight(){
return $( window ).height();
}

function isFocus(){
return $(document.activeElement).prop('tagName')=='INPUT' || $(document.activeElement).prop('tagName')=='TEXTAREA';
}

var focused = false;
var windowWidth=getWidth(),windowHeight=getHeight();

//then on resize...    
$(window).resize(function() {

var tWidth=getWidth(),tHeight=getHeight(),tfocused=isFocus();

//if the saved window width is still equal to the current window width do nothing
if (windowWidth == tWidth && ((tHeight < windowHeight && !focused && tfocused) || (tHeight > windowHeight && focused && !tfocused))){
 windowWidth=tWidth;
 windowHeight=tHeight;
 focused=tfocused;
 return;
}
else{
 windowWidth=tWidth;
 windowHeight=tHeight;
 focused=tfocused;

 //Your Code Here

}
});

Ответ 7

Этот вопрос основан на надежном способе обнаружения, когда экранная клавиатура появляется (или исчезает) на мобильных устройствах. К сожалению, нет надежного способа обнаружить это. Подобные вопросы возникли несколько раз на SO, с различными хаками, трюками и обходными решениями (см. этот ответ для ссылок на несколько релевантных ответов).

Также обратите внимание, что событие изменения размера не всегда срабатывает при появлении экранной клавиатуры (см. этот ответ).

Мое общее предположение заключалось бы в обнаружении присутствия сенсорного экрана + обнаружение того, является ли активный элемент типом, который запускает экранную клавиатуру (что-то похожее на этот ответ), Тем не менее, этот подход все равно будет терпеть неудачу для гибридных устройств Windows (таких как Surface Pro), где иногда экранная клавиатура может присутствовать при изменении размера браузера, а иногда аппаратная клавиатура может использоваться при изменении размера браузера.