我正在为iPad编写一个Web应用程序(不是常规App Store应用程序 - 它是使用HTML,CSS和JavaScript编写的).由于键盘填满了屏幕的大部分,因此在显示键盘时更改应用程序的布局以适应剩余空间是有意义的.但是,我发现无法检测键盘何时或是否显示.
我的第一个想法是假设当文本字段具有焦点时键盘可见.但是,当外接键盘连接到iPad时,当文本字段获得焦点时,虚拟键盘不会显示.
在我的实验中,键盘也没有影响任何DOM元素的高度或滚动高度,我没有发现任何专有事件或属性来指示键盘是否可见.
我正在开发基于Web的移动(HTML)应用程序.有没有办法检测键盘事件,如键盘可见和键盘隐藏,基于我可以控制其他屏幕布局.
我已经尝试了焦点,模糊,浏览器调整大小事件,但我的问题没有解决100%,所以我只寻找键盘事件,实际上我想在键盘可见时隐藏页脚,因为它(页脚)出现在键盘上,所以我试图在键盘可见时设置相对的页脚位置,并在键盘隐藏时将页脚位置固定.
我尝试过如下工作,但这不能解决我的问题.
$(document).ready(function () {
$("input").focus(function() {
$(".copyright_link").css("position","relative");
});
$("input").blur(function() {
$(".copyright_link").css("position","fixed");
});
});
任何人都可以帮我解决页脚问题,或者让我知道jquery中是否有键盘事件.
我想要一个使用相同HTML的网站,但要以最好的方式为它所服务的平台"小组化"它.
是否有一种标准做法,用于检测客户端上的移动设备/硬件键盘,并决定是否加载jQuery Mobile以及该站点的移动JavaScript或jQuery UI以及用于桌面体验的脚本？
以下似乎是一种合理的方法,但我想知道Modernizr.touch是否是检测此问题的最佳方法？例如:强制触摸可能不是Surface的最佳解决方案.有没有办法检测是否还有硬件键盘？
Modernizr.load({
test: Modernizr.touch,
yep : ['jquery-mobile.js','mobile.js']
nope: ['jquery-ui.js','desktop.js']
});
编辑:
找到一些相关的Modernizr错误:
我想我真正需要的是一种检测设备是否能够触摸以及是否具有硬件键盘的方法.我可以使用David Mulder的答案来检测物理单位(英寸)中的设备宽度作为代理,并假设任何> 11英寸有键盘,但我打赌那里有一个大型平板电脑(或谷歌将发布nexus 12平板电脑: )这会做出错误的假设.
我有一小组大约90个用户非常重要,所以当这些商业客户中的一个或两个希望在他们的网络应用程序中更改UI时,他们通常会获得专用的开发资源.但是,对于我们来说,确切了解整个组织如何使用该应用程序非常重要,因为该组往往对其UI应该如何看起来具有强烈的个人观点,并且他们都以不同方式使用该应用程序.我在识别硬件和软键盘的使用方面遇到了最大麻烦.最理想的是,我正在寻找一个简单的答案,"使用新的Window.TabletMode == true!" 我不认为这个简单的答案存在.
window.orientation属性为肖像返回0,为横向视图返回90或-90.
结合window.innerHeight,我可以使用像......
var portrait;
$(window).on("orientationchange",function(event){
if (event.orientation == 0)
{
portrait = true;
}
else //if not, it's landscape
{
portrait = false;
}
});
然后我将window.innerHeight结合使用的值portrait来确定宽高比是否看起来我打开了键盘.考虑到我相当狭窄的约束,这种方法确实可以全屏工作,但是如果浏览器不是全屏的呢？我确信还有很多其他理由不为此编写hacky比率计算.此外,我最大的愿望当然是使用任何浏览器和任何屏幕尺寸.
我可以处理的这些事情:我需要在加载文档时设置变量,并找出确定何时键入变得相关的方法.我可能需要检查一些浏览器功能.也许我会在有和没有硬件键盘的情况下增加计数器的输入.一旦我达到一定数量(比方说5次击键),我就会向我的数据跟踪端点发送一个POST请求,让它知道会话12345使用了软键盘(或硬键盘).之后,我将取消订阅事件处理程序.但是我工作的这部分不太受关注,因为我不认为我会陷入任何困境,但我不希望任何人花时间去美化或开发一个巨大的例子.