8***@qq.com
8***@qq.com
  • 发布:2019-01-16 17:09
  • 更新:2019-01-16 17:19
  • 阅读:3354

NVUE 容器一旦设置了position且容器高度不能超过整屏,在安卓端就会被键盘遮挡

分类:uni-app

譬如WEEX的这个input的例子,如果把input删的不足以撑满整个界面,在安卓端,不会自动的整页往上浮动,导致input被键盘遮挡,这个问题应该怎么解决啊?IOS正常

http://dotwe.org/vue/e10071e8a419a235ed6002050de07779
<template>
<div>
<div>
<text style="font-size: 40px">oninput: {{txtInput}}</text>
<text style="font-size: 40px">onchange: {{txtChange}}</text>
<text style="font-size: 40px">onreturntype: {{txtReturnType}}</text>
<text style="font-size: 40px">selection: {{txtSelection}}</text>

</div>  
<scroller class="scroller">  
  <div>  
    <div style="background-color: #286090">  
      <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = text</text>  
    </div>  
    <input type="text" placeholder="Input Text" class="input" :autofocus=true value="" @change="onchange" @input="oninput"/>  
  </div>  

  <div>  
    <div style="background-color: #286090">  
      <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = password</text>  
    </div>  
    <input type="password" placeholder="Input Password" class="input" @change="onchange" @input="oninput"/>  
  </div>  

  <div>  
    <div style="background-color: #286090">  
      <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = url</text>  
    </div>  
    <input type="url" placeholder="Input URL" class="input" @change="onchange" @input="oninput"/>  
  </div>  

  <div>  
    <div style="background-color: #286090">  
      <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = email</text>  
    </div>  
    <input type="email" placeholder="Input Email" class="input" @change="onchange" @input="oninput"/>  
  </div>  

</scroller>  

</div>
</template>

<style scoped>
.input {
font-size: 60px;
height: 80px;
width: 750px;
}
.scroller{
position: absolute;
top:200px;
}
.button {
font-size: 36;
width: 200;
color: #41B883;
text-align: center;
padding-top: 10;
padding-bottom: 10;
border-width: 2;
border-style: solid;
margin-right: 20;
border-color: rgb(162, 217, 192);
background-color: rgba(162, 217, 192, 0.2);
}
</style>

<script>
module.exports = {
data: function () {
return {
txtInput: '',
txtChange: '',
txtReturnType: '',
txtSelection:'',
autofocus: false
};
},
methods: {
ready: function () {
var self = this;
setTimeout(function () {
self.autofocus = true;
}, 1000);
},
onchange: function (event) {
this.txtChange = event.value;
console.log('onchange', event.value);
},
onreturn: function (event) {
this.txtReturnType = event.returnKeyType;
console.log('onreturn', event.type);
},
oninput: function (event) {
this.txtInput = event.value;
console.log('oninput', event.value);
},
focus: function () {
this.$refs['input1'].focus();
},
blur: function () {
this.$refs['input1'].blur();
},
setRange: function() {
console.log(this.$refs["inputselection"]);
this.$refs["inputselection"].setSelectionRange(2, 6);
},
getSelectionRange: function() {
console.log(this.$refs["inputselection"]);
var self = this;
this.$refs["inputselection"].getSelectionRange(function(e) {
self.txtSelection = e.selectionStart +'-' + e.selectionEnd;
});
}
}
};
</script>

2019-01-16 17:09 负责人:无 分享
已邀请:
Trust

Trust - 少说废话

请直接上传项目,并附上问题的截图等信息。

8***@qq.com

8***@qq.com (作者)


我是点击的input Email这个输入框
然后当我点击的时候,键盘就会遮挡住输入框,不会上浮,但是当我取消 scroll的position的fixed或者absolute属性的时候,就正常了

该问题目前已经被锁定, 无法添加新回复