作者:张珮娟7063 | 来源:互联网 | 2023-09-03 11:30
最近在进行公众号H5的开发,在android手机上还好说,ios上真的有不少坑啊。下面来说说做评论模块时ios上的坑!
input输入框在ios上,时有时无。问题解决看代码:
created () {let clientHeight = document.documentElement.clientHeight || document.body.clientHeightwindow.Onresize= () => {//监测输入键盘显示隐藏let nowClientHeight = document.documentElement.clientHeight || document.body.clientHeightif (clientHeight - nowClientHeight > 60) { //因为ios有自带的底部高度//键盘弹出的事件处理document.getElementById("apply").classList.add("focusState") } else {//键盘收起的事件处理document.getElementById("apply").classList.remove("focusState") }}css:
.focusState{position: absolute}
好了,此事输入框可以乖乖的显示出来了;
下面解决键盘收起后有白框的问题,因为这个白框影响input二次输入和点击事件都受到影响。
methods: {
onFocus () {
let body = document.getElementById(“apply”)
body.scrollTop = body.scrollHeight
},
onBlur () {
window.scroll(0,0)
}
}
给input添加获取焦点和失去焦点,改变滚动高度,问题就可以解决啦!