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

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

来源:萌宠菠菠乐园 时间:2026-02-26 06:36

最新推荐文章于 2025-09-23 11:23:28 发布

原创 于 2019-04-28 15:40:02 发布 · 1.3w 阅读

· 4

· 8 ·

CC 4.0 BY-SA版权

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

注意点:

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

},

相关知识

type=“text”只能输入数字!
input type =text,按回车键自动提交
点击不弹出日期框框
input type=file title 设置
自定义 input[type=checkbox] 样式
热带鱼水族箱屏幕保护程序破解版(附注册码)
Python学习笔记(3)——input函数
输入法怎么才能打出动物表情
宠爱APP需求文档
微信小程序宠物论坛5

网址: 小程序input输入框键盘弹出使得布局上移问题 https://www.mcbbbk.com/newsview1353334.html

所属分类:萌宠日常
上一篇: 盲人该怎么样过生活作文
下一篇: 第4章 使用Thymeleaf模

推荐分享