欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue ios输入键盘弹出遮挡样式及收回后页面留白问题解决

程序员文章站 2022-06-13 16:35:14
...

最近在进行公众号H5的开发,在android手机上还好说,ios上真的有不少坑啊。下面来说说做评论模块时ios上的坑!
input输入框在ios上,时有时无。问题解决看代码:

<div id="apply">
	<ul class="comm-list" @click="handelInputShow">
		<li class="comm-li" v-for="(item,index) in comments" :key="index">
			<img :src="item.avatarUrl" alt="#" />
			<div class="comm-info">
				<div class="com-row">
					<p class="comm-name">{{item.nickName}}</p>
					<p class="comm-time">{{item.updated_at}}</p>
				</div>
				<p class="comm-msg">{{item.content}}</p>
				
			</div>
		</li>	
	</ul>
	<div class="footer">
		<div class="text-input" v-if="inputShow">
			<input ref="inputVal" type="text" 
				v-model="content" placeholder="优质评论将会优先选用"
				@focus="onFocus"  @blur="onBlur"
				/>
			<span class="submint" @click="sendOutMessage">发布</span>
		</div>
		<div class="icons" v-else>
			<div class="input" @click="handelInputShow">写评论...</div>
			<div class="icon">
				<img src="@/assets/imgs/icon/pinglun.png"/>
				<i class="num" v-show="comment_num > 0">{{comment_num}}</i>
			</div>
			<div class="icon" @click="handleCollect">
				<img src="@/assets/imgs/icon/shoucang1.png" v-if="collect" />
				<img src="@/assets/imgs/icon/shoucang.png" v-else/>
			</div>
			<div class="icon" @click="handleGood">
				<img src="@/assets/imgs/icon/zan1.png" v-if="goods" />
				<img src="@/assets/imgs/icon/zan.png" v-else/>
			</div>
		</div>
	</div>
</div>

created () {
		let clientHeight = document.documentElement.clientHeight || document.body.clientHeight
		window.onresize = () => {//监测输入键盘显示隐藏
			let nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight
			if (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添加获取焦点和失去焦点,改变滚动高度,问题就可以解决啦!