Question

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

我有一个调整大小的函数，如：

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

我希望在所有调整大小事件中对该函数执行'stuff'，除非软键盘触发它。如何确定软键盘是否已触发调整大小？

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

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

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

Answer 3

问题是，如果活动元素被聚焦，你可以通过关闭键盘而不改变焦点来触发resize事件。因此，键盘将被隐藏，但代码将进入焦点状态。 / p>

Answer 4

我一直在寻找类似问题的解决方案。当网址输入进入和退出视图时，我的调整大小事件就会触发。这是我一直在努力的......可以有一个可能的解决方案吗？

所以基本上你只是检查一下屏幕的宽度是否已经改变，只有在调整大小时才激活你的函数：

例如：

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

    });

Answer 5

与之前的答案类似，但针对所有具有焦点的形式的孩子（显然，没有父母形式的输入会失败）

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

Answer 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

}
});

Answer 7

这个问题依赖于有一种可靠的方法来检测屏幕键盘何时出现（或消失）在移动设备上。不幸的是，没有可靠的方法来检测这一点。类似的问题在SO上已多次提出，建议使用各种黑客，技巧和变通方法（请参阅this answer以获取指向多个相关答案主题的链接）。

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

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

Answer 8

在当前版本的chrome webview中可以正常工作。我只是通过使用以下代码在Angular中实现了窗口调整大小功能。

ExerciseList

注意：可以通过使用

来实现

@HostListener('window:resize', ['$event'])
  onResize(event) {
  // Do you handling here.
}

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

8 个答案: