javascript是否可以获得键盘高度调研

今天想实现在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.

4. 当键盘出来时,默认会将页面上推,即scrollTop值变化,若切换了输入法,推动高度相应会变化27px

方向英文中文
portrait 107134
landscape279306

5. 当键盘出来后,元素fix属性失效
基于以上调研结果,这种交互效果实在不好实现啊。。。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值