【uniapp】关于小程序输入框聚焦、失焦（输入法占位）的问题

feifeiyechuan2023-09-10 10:28

聊天小程序，界面带有输入框，当输入框中聚焦后，底部自动谈起输入法。此时输入框也要随之出现在输入法上方。默认情况下，输入框此时会被输入法覆盖掉。

以下是亲自实践，解决这个问题的方法：

一、小程序大概布局

复制代码

<template>
	<view style="height: 100%; display: flex; flex-direction: column;">
		
		<!-- 自定义导航栏 -->
		<head-nav :navRedirectPage="navRedirectPage"></head-nav>
		
		<!-- 小程序界面内容 -->
		<view class="container" :style="containerStyle">
			<!-- 聊天界面内容 -->
			<scroll-view ref='list' :scroll-top="scrollTop" class="chat-container" :scroll-y="true"></scroll-view>
			
			<!-- 底部输入框 -->
			<view class="bottom-bar"  :style="bottom_autosize_style">
				<view class="input-view">
						<uv-textarea selectable="true" :cursor-spacing="20" v-model="inputText" :inputBorder="false" customStyle="overflow: scroll;max-height: 75px;border-width: 0px !important;background-color: #F7F7FC;margin-left: 12px;padding: 7px;"
			:adjust-position="false" :show-confirm-bar='false' @blur="inputBindBlur" :maxlength="500" autoHeight placeholder="请输入内容" @focus="inputBindFocus"></uv-textarea>					
					<button class="send-button" @click="sendMessage"
						:disabled="!inputText.trim().length>0 || sendDisabled">
						<image class="send-message" src="/static/v2/aichat/fasong.png" />
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

css样式表：

默认样式为：

复制代码

  // 聊天窗口
  .chat-container {
  	flex-grow: 1; // 窗口大小为可变
  	overflow-y: auto;
  }

  // 底部输入框
  .bottom-bar {
  		position: relative;
  		display: flex;
  		align-items: center;
  		padding: 6px 13px 6px 13px;  // 主要是padding-bottom变化
  }

当焦点在输入框内时，需要调整内容：

// 聚焦方法
inputBindFocus(e){
console.log('e.detail.height:', e.detail.height)
if (e.detail.height) {
this.bottom_autosize_style = "padding-bottom:" + (e.detail.height + 6ssss) + "px;"
if (!this.showScrollToBottom) {
this.scrollToBottom();
}
}
},
// 失焦方法
inputBindBlur(){
// this.containerStyle = ' height:' + this.containerHeight + 'px;';
this.bottom_autosize_style = ""
if (!this.showScrollToBottom) {
this.scrollToBottom();
}
}

请注意 bottom_autosize_style 这个变量的变化，即可实现。