小程序input输入框键盘弹出使得布局上移问题

最新推荐文章于 2024-07-17 17:00:29 发布

aaron9185

最新推荐文章于 2024-07-17 17:00:29 发布

阅读量5.2k

点赞数 1

注意点：

1.style='bottom:{{inputBottom}}px'单位用px

2.input的 adjust-position='{{false}}'要用false

html部分：

<!-- start 输入框 -->

<view class='inputBottom' style='bottom:{{inputBottom}}px'>
    <input type='text' class='textInput' value='{{inputText}}' placeholder-class='textInputPlaceHolder' placeholder='输入你想要说的...' bindinput='getInputText' bindfocus="foucus" bindblur="blur" bindconfirm='submit' adjust-position='{{false}}'></input>
    <text bindtap='submit' class='submit'>发送</text>
</view>

<!-- end 输入框 -->

css部分：

.inputBottom{
width: 100%;
position: fixed;
left: 0rpx;
bottom: 0rpx;
background: #fff;
height: 100rpx;
box-sizing: border-box;
padding: 18rpx 10rpx;
}

.inputBottom .textInput{
/* border-bottom: 2rpx solid #000; */
display: inline-block;
width: 80%;
}

.inputBottom .textInputPlaceHolder{
font-size: 30rpx;
}

.inputBottom .submit{
font-size: 34rpx;
display: inline-block;
text-align: center;
float: right;
margin-right: 20rpx;
background: green;
border-radius: 6rpx;
color: #fff;
padding: 2rpx 8rpx;
}

js部分：

//输入聚焦

foucus: function (e) {
var that = this;
that.setData({
inputBottom: e.detail.height
})
},


//失去聚焦
blur: function (e) {
var that = this;
that.setData({
inputBottom: 0
})
},

//用户输入内容--提交输入
submit:function(){
var that = this;
console.info(that.data.inputText);
if (!that.data.inputText){
wx.showToast({
icon:'none',
title:'请输入内容'
})
return false;
}

talkList.push({
who: 2,
text: that.data.inputText
})

that.setData({
talkList: talkList,
inputText:'',
//inputBottom: 0
})

that.scrollToBottom();
},