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

- 日理万妓 2022-02-13 18:51 597阅读 0赞

**注意点：**

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

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

**html部分：**

<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>

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

\},

发表评论取消回复

表情：

评论列表（有 0 条评论，597人围观）

还没有评论，来说两句吧...

相关阅读

相关 [uniapp 小程序]textarea input 弹出键盘遮挡部分页面问题解决

背景 uniapp聊天中弹出键盘遮挡了输入框，如下 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

怼烎@/ 2023年06月24日 04:53/ 0 赞/ 584 阅读

相关小程序开发之弹出框

小程序开发过程中，很多地方为了便利我们多采用小程序自带弹出框来实现交互效果。这也够大多数开发使用，下面我给大家详细介绍下小程序弹出框官方api传送门：https://de

ゝ一纸荒年。/ 2023年01月08日 11:28/ 0 赞/ 178 阅读

相关 Bootstrap 弹出输入框

效果 ![这里写图片描述][70] 原理引入 `Bootstrap` 和 `jQuery` 在 `弹框` 中加入输入框，同时 `自动获得焦点`

柔光的暖阳◎/ 2022年05月18日 01:42/ 0 赞/ 339 阅读

相关小程序底部弹出框效果

问题描述：点击使用说明，弹出消息框，显示相关信息（1）wxml页面 <view class='explain' bindtap="show"> <te

淩亂°似流年/ 2022年05月15日 05:21/ 0 赞/ 498 阅读

相关解决react-native软键盘弹出挡住输入框的问题

![1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

清疚/ 2022年04月23日 06:30/ 0 赞/ 351 阅读

相关小程序弹出框

[https://www.cnblogs.com/bgwhite/p/9335648.html][https_www.cnblogs.com_bgwhite_p_9335648

逃离我推掉我的手/ 2022年04月22日 16:16/ 0 赞/ 276 阅读

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

注意点： 1.style='bottom:\{ \{inputBottom\}\}px'单位用px 2.input的 adjust-position='\{ \{false

- 日理万妓/ 2022年02月13日 18:51/ 0 赞/ 598 阅读

相关 uni-app 微信小程序弹出输入框

> 弹出输入框样式效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNz

浅浅的花香味﹌/ 2021年12月01日 10:34/ 0 赞/ 1631 阅读

相关小程序弹出框详解

![标题图][1240] 小程序弹出框详解 qjlx: function() { var itemList = ['病假', '事假'];

待我称王封你为后i/ 2021年09月17日 04:40/ 0 赞/ 396 阅读

相关小程序安全设置-弹出框输入获取值

> 小程序安全设置 Page({ / 页面的初始数据 / data: { anquan: '',

àì夳堔傛蜴生んèń/ 2021年09月17日 02:18/ 0 赞/ 445 阅读