譬如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>
2 个回复
Trust - 少说废话
请直接上传项目,并附上问题的截图等信息。
8***@qq.com (作者)
我是点击的input Email这个输入框
然后当我点击的时候,键盘就会遮挡住输入框,不会上浮,但是当我取消 scroll的position的fixed或者absolute属性的时候,就正常了