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

注意点:

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();

},

猜你喜欢

转载自blog.csdn.net/u012011360/article/details/89639317
今日推荐