我正在为iPad编写一个Web应用程序(不是常规App Store应用程序 - 它是使用HTML,CSS和JavaScript编写的).由于键盘填满了屏幕的大部分,因此在显示键盘时更改应用程序的布局以适应剩余空间是有意义的.但是,我发现无法检测键盘何时或是否显示.
我的第一个想法是假设当文本字段具有焦点时键盘可见.但是,当外接键盘连接到iPad时,当文本字段获得焦点时,虚拟键盘不会显示.
在我的实验中,键盘也没有影响任何DOM元素的高度或滚动高度,我没有发现任何专有事件或属性来指示键盘是否可见.
理想情况下,我希望整个界面都有一个自定义样式,可以在ios(itouch/ipad)上找到,或者在虚拟键盘存在的情况下等效.请参阅下面的更多细节.
当键盘"存在"时,自定义设置CSS黑客规则是活动的,也是可接受的解决方案.
在网站上定位机器人和ios(HTML/JavaScript/CSS)另请注意,内部布局为:"流畅".
编辑:这是更多的设计,然后是文字; 所以这些变化并没有让人迷失方向.在最低级别,我只想在有和没有虚拟键的情况下进行设计更改(也许只是背景更改).
这是一个好的或坏的设计理念的问题是有争议的.但是,我觉得这个问题无关紧要.对于这样的漏洞利用可以使用更多文本(例如游戏或交互式媒体).
因此,赏金:尽管不再需要我正在研究的项目的答案(使用了替代设计).我仍然相信这个问题可以从回答中受益.
默认行为
+--------+
| |
+------------+ +-+-hidden-+-+ <- ~50% hidden
| +--------+ | | +--------+ |
| | | | | |visible | |
| | | | \ | | | | <- ~50% visible
| | 100% | | ==> | +--------+ |
| | | | / | |virtual | |
| | | | | | keys | |
| +--------+ | | +--------+ …关于软键盘的讨论很多,但我还没有找到解决问题的好方法.
我有一个调整大小的功能,如:
$(window).resize(function() {
///do stuff
});
我希望在所有调整大小事件中对该函数执行'stuff',除非它由软键盘触发.如何确定软键盘是否触发了调整大小？