今天想实现在ipad上紧贴着虚拟键盘创建一个工具条的交互效果,该交互效果主要有几个点:
1. 工具条在键盘上方,紧贴着键盘
2. 当页面滑动时,工具条始终固定在键盘上方
3. 视觉上与原生键盘一致
针对这个效果进行了调研,调研内容及结果主要包括以下几个方面:
1. 纯js不能获取键盘大小,位置等信息,键盘是否出现,也没有相应的事件
2. 当键盘未出现时
$(window).scrollTop(10)
设置scrollTop值无效,当键盘出现时可以设置该值,则
$('input').on('focus',function() {
$(window).scrollTop(10);
var keyboard_shown = $(window).scrollTop() > 0;
$(window).scrollTop(0);
$('#test').append(keyboard_shown?'keyboard ':'nokeyboard ');
});
可判断键盘是否出现,但好像也还有bug
3. ipad尺寸大小
portrait 264
landscape 352.
5. 当键盘出来后,元素fix属性失效
基于以上调研结果,这种交互效果实在不好实现啊。。。
1. 工具条在键盘上方,紧贴着键盘
2. 当页面滑动时,工具条始终固定在键盘上方
3. 视觉上与原生键盘一致
针对这个效果进行了调研,调研内容及结果主要包括以下几个方面:
1. 纯js不能获取键盘大小,位置等信息,键盘是否出现,也没有相应的事件
2. 当键盘未出现时
$(window).scrollTop(10)
设置scrollTop值无效,当键盘出现时可以设置该值,则
$('input').on('focus',function() {
$(window).scrollTop(10);
var keyboard_shown = $(window).scrollTop() > 0;
$(window).scrollTop(0);
$('#test').append(keyboard_shown?'keyboard ':'nokeyboard ');
});
可判断键盘是否出现,但好像也还有bug
3. ipad尺寸大小
portrait 264
landscape 352.
4. 当键盘出来时,默认会将页面上推,即scrollTop值变化,若切换了输入法,推动高度相应会变化27px
方向 | 英文 | 中文 |
portrait | 107 | 134 |
landscape | 279 | 306 |
基于以上调研结果,这种交互效果实在不好实现啊。。。