关于软键盘的讨论很多,但我还没有找到解决我问题的好方法。
我有一个调整大小的功能,例如:
$(window).resize(function() {
///do stuff
});
我想在所有调整大小事件上执行该函数中的“东西”,除非它是由软键盘触发的。如何确定软键盘是否触发了调整大小?
关于软键盘的讨论很多,但我还没有找到解决我问题的好方法。
我有一个调整大小的功能,例如:
$(window).resize(function() {
///do stuff
});
我想在所有调整大小事件上执行该函数中的“东西”,除非它是由软键盘触发的。如何确定软键盘是否触发了调整大小?
我最近遇到了一些需要检查的问题。我设法像这样解决它:
$(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
}
}
我只需要它用于文本输入,但显然这可以扩展为任何可能触发软键盘/数字选择器等的元素。
我刚刚修复了 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
}
}
问题是,如果活动元素被聚焦,您可以通过关闭键盘而不改变焦点来触发调整大小事件。因此,键盘将隐藏但代码将进入焦点条件。
这个问题依赖于有一种可靠的方法来检测屏幕键盘何时出现(或消失)在移动设备上。不幸的是,没有可靠的方法来检测这一点。类似的问题已经多次出现在 SO 上,并提出了各种黑客、技巧和解决方法(请参阅此答案以获取几个相关答案线程的链接)。
另请注意,屏幕键盘出现时并不总是触发调整大小事件(请参阅此答案)。
我的一般建议是检测触摸屏的存在+检测活动元素是否属于触发屏幕键盘的类型(类似于此答案)。但是,对于混合 Windows 设备(例如 Surface Pro),这种方法仍然会失败,有时屏幕键盘可能会在浏览器调整大小时出现,有时硬件键盘可能会在浏览器调整大小时使用。
与之前的答案类似,但针对所有具有焦点的表单子项(显然,在没有表单父项的情况下输入会失败)
$(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
}
});
我一直在寻找类似问题的解决方案。我的调整大小事件在 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;
}
});
有几件事你需要集中精力
当浏览器调整大小时,您可以使用这些组合
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
}
});
在当前版本的 chrome webview 中工作正常。我刚刚使用以下代码在 Angular 中实现了窗口调整大小功能。
@HostListener('window:resize', ['$event'])
onResize(event) {
// Do you handling here.
}
注意:同样可以通过使用来实现
window.addEventListener('resize', () => {
// Do handling here
});