问题描述:移动端开发的时候,在登录界面,由于输入框在底部位置,点击以后,弹出输入法遮挡了输入框,看不到输入的内容。
思路:在input下面放一个div块,然后对input进行事件监听。如果input是focus(这时候弹出输入法了)就显示div块,把input撑起来;如果input是blur(输入法关闭了),就隐藏div块。
但是,有一个问题。如果在input被focus的时候,直接点击关闭输入法,输入法被关闭了,input还是focus状态。所以应该监听输入法状态。
解决:安卓开发人员获取pda的响应事件,给前端方法。前端通过方法获取状态。
<yd-input slot="right" type="password" v-model="password" placeholder="请输入密码"></yd-input>
...
<section class="blank-box" v-show="blankFlag"></section>
...
<script>
export default {
data(){
return {
password:'',
blankFlag:false,//是否显示空白块
}
},
mounted(){
window.showStateFromJava = this.showStateFromJava;
},
methods:{
//监听输入法
showStateFromJava(val){
if(this.$route.path == '/login'){
//0输入法隐藏 块隐藏
this.blankFlag = val === 0 ? false : true
}
},
}
}
</script>
<style>
.blank-box{
height: 4.5rem;
background-color:#f7f8ff ;
}
</style>