微信端 iphone7 软键盘隐藏后，输入框不会下滑到底部

原创于 2019-02-18 19:18:22 发布 · 714 阅读

0 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

4 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

本文介绍了一种解决iOS设备上，当输入框失去焦点后，软键盘关闭但输入框未正确下滑至底部的问题的方法。通过检测设备类型并针对性地调整元素滚动位置，确保了用户体验的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*iphone7    弹框复位bug*/
	resetPosition: function(){
         setTimeout(function(){
     		if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
     			return
     		}
     		var result = 'pc';
     	    if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
     	        result = 'ios'
     	    }else if(/(Android)/i.test(navigator.userAgent)) {  //判断Android
     	        result = 'android'
     	    }
     	    if( result = 'ios' ){
     			document.activeElement.scrollIntoViewIfNeeded(true);
     	    }
         }, 400)
    },

<div class="edit-info-api">
				<label><span>&nbsp;</span> 生产日期：</label><input type="text" @blur.prevent="WE.resetPosition()" @click.stop="selectDate" :readonly="true" v-model="upperShelves.productionDate" />
			</div>

在苹果手机上弹框使用定位absolute、fixed 的 bug，当输入框失去焦点，软键盘隐藏后，输入框不会下滑到底部