javascript 如何确定移动浏览器中的软键盘是否触发了调整大小事件？

How to determine if a resize event was triggered by soft keyboard in mobile browser?

提问by Jose Calderon

There's a lot of discussion about the soft keyboard but I haven't found a good solution for my problem yet.

有很多关于软键盘的讨论，但我还没有找到解决我问题的好方法。

I have a resize function like:

我有一个调整大小的功能，如：

$(window).resize(function() {
    ///do stuff
});

I want to do the 'stuff' in that function on all resize events except for when it is triggered by the soft keyboard. How can I determine if the soft keyboard has triggered the resize?

我想在所有调整大小事件的那个函数中做“东西”，除非它被软键盘触发。如何确定软键盘是否触发了调整大小？

回答by kirisu_kun

I recently ran into some problems that needed a check for this. I managed to solve it like so:

我最近遇到了一些需要对此进行检查的问题。我设法解决它像这样：

$(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
   }
}

I only needed it for text inputs, but obviously this could be expanded for any kind of element which might trigger the soft keyboard/number picker etc.

我只需要它用于文本输入，但显然这可以扩展用于可能触发软键盘/数字选择器等的任何类型的元素。

回答by CpnCrunch

I've just fixed kirisu_kun's answer to use prop() instead of attr():

我刚刚修复了 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
   }
}

回答by mobiledeckyou

The problem is that, if the active element is focused, you can trigger the resize event just by closing the keyboard without altering the focus.. so, the keyboard will hidden but the code will enter into the condition of focus.

问题是，如果活动元素被聚焦，你可以通过关闭键盘而不改变焦点来触发调整大小事件..所以，键盘会隐藏但代码会进入焦点状态。

回答by Gee_63

I've been looking for a solution to a similar issue. My resize event was triggering when the url input came in and out of view. This is something I've been working on... Could have a possible solution?

我一直在寻找类似问题的解决方案。当 url 输入进出视图时，我的调整大小事件被触发。这是我一直在研究的东西......有可能的解决方案吗？

So basically you just check if the width of the screen alone has changed or not, and only fire your functions on the resize if it is different:

所以基本上你只检查屏幕的宽度是否已经改变，如果不同，则只在调整大小时触发你的功能：

eg:

例如：

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

    });

回答by Tomas Langkaas

This question relies on there being a reliable way to detect when the onscreen keyboard appears (or disappears) on mobile devices. Unfortunately, there is no reliable way to detect this. Similar questions have come up several times on SO, with various hacks, tricks and workarounds suggested (see this answerfor links to several relevant answer threads).

这个问题依赖于有一种可靠的方法来检测屏幕键盘何时在移动设备上出现（或消失）。不幸的是，没有可靠的方法来检测这一点。类似的问题已经多次出现在 SO 上，并提出了各种技巧、技巧和解决方法（请参阅此答案以获取指向多个相关答案线程的链接）。

Also note that the resize event is not always triggered when the onscreen keyboard appears (see this answer).

另请注意，屏幕键盘出现时并不总是触发调整大小事件（请参阅此答案）。

My general suggestion would be to detect presence of touchscreen + detection of whether the active element is of a type that triggers an onscreen keyboard (something similar to this answer). However, this approach would still fail for hybrid windows devices (such as Surface Pro), where sometimes the onscreen keyboard may be present on browser resize, and sometimes the hardware keyboard may be in use on browser resize.

我的一般建议是检测触摸屏的存在 + 检测活动元素是否属于触发屏幕键盘的类型（类似于此答案）。但是，对于混合 Windows 设备（例如 Surface Pro），这种方法仍然会失败，其中有时屏幕键盘可能会在浏览器调整大小时出现，有时硬件键盘可能会在浏览器调整大小时使用。

回答by jafarbtech

There are a few things u need to concentrate about

有几件事你需要集中注意力

1. All soft keyboards affects only the height and not width.
2. Focus elements tags can be either input or textarea.
3. The height will decrease when element get focused (or) the height will increase when focused out.

1. 所有软键盘只影响高度而不影响宽度。
2. 焦点元素标签可以是 input 或 textarea。
3. 元素聚焦时高度会降低（或）聚焦时高度会增加。

You can use these combinations when the browser gets resized

当浏览器调整大小时，您可以使用这些组合

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

}
});

回答by Dawson

Similar to previous answer, but targets all kids of form with focus (obviously, would fail on inputs without a form parent)

与之前的答案类似，但针对所有具有焦点的表单子项（显然，如果没有表单父项，输入将失败）

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

So maybe this one...

所以也许这个...

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