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

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

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

一、小程序大概布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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变化
	}
1
2
3
4
5
6
7
8
9
10
11
12
13

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

// 聚焦方法
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();
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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