The input is not easy to get the focus on the mobile terminal and the Android phone keyboard pops up to cover the input box after the focus is obtained. The problem is solved

Wrap a parent div for the input and add a click event to make the input focus
html code

<div class="inputBox" @click="inputClicked('activeInput')"><input v-model="activeChecked" @focus="androidFocus" ref='activeInput' /></div>

js method:

androidFocus(){
    
    
	//此处获取本地存储UA为通过 navigator.userAgent 获取的判断终端的机型 具体方法不再阐述
	var UA = localStorage.getItem("UA");
	console.log("UA", UA);
	if (UA == "Android") {
    
    
	  console.log("安卓方法");
	  //获取焦点后Android手机键盘弹起覆盖输入框问题解决
	  document.body.scrollTop = document.body.scrollHeight;
	} else {
    
    
	  console.log("苹果方法");
	}
},
//增大input获取焦点点击区域方法
inputClicked(inputName){
    
    
	if (this.$refs[inputName]) {
    
    		
	    this.$refs[inputName].focus(()=>{
    
    
	    	//获取焦点后Android手机键盘弹起覆盖输入框问题解决
			document.body.scrollTop = document.body.scrollHeight;
		});
	}
},

Guess you like

Origin blog.csdn.net/qq_40969782/article/details/111621523