如何用javascript获取手机浏览器虚拟键盘的高度？

Question

开发webapp网页，想做一个菜单栏，悬浮紧靠在虚拟键盘上面，就像一个ios里面的备忘录这个效果一样？改如何去实现？

弹出虚拟键盘时，如何通过javascript获取虚拟键盘的高度？

---

PS：试过position:fixed 不好使，求有经验的大哥大姐赐教！

Answer 1

绝对定位就可以了

Answer 2

js是浏览器
浏览器无法干这个事儿
如果你 WebApp
可以借助 Native代码交互方式 传输键盘高度

Answer 3

我使用 height:100%;display:flex; align-self:end;解决的

*{
    margin:0;
    padding:0;
}

html,body{
    height: 100%;
}

.rowFlex {
    display: flex;
    flex-direction: row;
}

.colFlex {
    display: flex;
    flex-direction: column;
    align-items: center;
}

<div id="app" class="colFlex" style="width: 100%;height: 100%">
    <div class="rowFlex" style="width: 100%;height: 100%" >
        <input type="text" style="height: 10px">
        <div style="align-self: flex-end;background: red;">123</div>
    </div>
</div>

Answer 4

我是这样解决的。当focus的时候做一个500毫秒左右的setTimeout.里面的函数可以写$(window).scrollTop(500)。这里的500是整个页面的高度，你可以根据实际情况即时获取，可以到页面底部就行。

Answer 5

请问解决了么

Answer 6

这个你解决了么