uniapp 解决点击输入框布局上顶的问题，解决点击发送按钮虚拟键盘回弹的问题，解决虚拟键盘覆盖输入框的问题，input组件@focus，@blur，@keyboardheightchange，聊天页_uni-app 控制键盘顶起输入框

<template>
	<view class="content">
		<view class="">测试文本</view>
		<view class="container" :style="{ bottom: bottomValue + 'px' }">
			<input class="input" @focus="inputBindFocus" v-model="title" :adjust-position="false" type="text"
				placeholder="请输入内容"
				@blur="inputblur"
				@keyboardheightchange="keyboardheightchange"></input>
				<!-- 
				@keyboardheightchange的作用是时刻监控虚拟键盘的高度
				@blur是触发输入框失去焦点时的事件
				@focus是触发点击输入框获取焦点时的事件
				:style="{ bottom: bottomValue + 'px' }"的作用是动态改变输入框的位置
				:adjust-position="false"的作用是 键盘弹起时，是否自动上推页面 这里选择了false
				
				 -->
			<button class="button" @touchend.prevent="send" @touchstart.prevent='p'>发送</button>
			<!-- 
			@touchend.prevent的作用是触摸并松开按钮时触发的事件
			@touchstart.prevent是触摸按钮时触发的事件，这里主要是为了解决点击发送按钮，虚拟键盘回弹的问题
			 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "",
				width: 0,
				height: 0,
				inputHeight: 0,
				bottomValue: 15,
				bottomValue: 15,
				changeBottomVal:15
				
			};
		},
		onLoad() {

		},
		methods: {
			//这个方法的作用是监控虚拟键盘的高度并动态调整样式
			keyboardheightchange(e){
				this.changeBottomVal = e.detail.height+15
				console.log(this.changeBottomVal);
				
				this.bottomValue = this.changeBottomVal;
			},
			//这是先前为了解决虚拟键盘弹出时把布局顶上去，不顶上去之后，输入框又不随着虚拟键盘移动的问题，但是失败了
			// 这里的作用是当用户点击输入框之后获取了焦点获取虚拟键盘的高度，而后动态改变布局的问题
			inputBindFocus(e) {
				if (e.detail.height) {

					this.inputHeight = e.detail.height //这个高度就是软键盘的高度
					console.log(this.inputHeight);

					if (this.inputHeight>30) {
						this.bottomValue = this.inputHeight+15;
					} else{
						this.bottomValue = 15;
					}

				}
			},
			//这个方法的作用是当输入框失去焦点的时候改变输入框的位置
			inputblur(e){
				this.bottomValue = 15;
			},
			//点击发送按钮触发的事件
			send() {
				console.log(this.title);
				// 清空输入框
				this.title = "";
			},
			p() {}, //空的函数，作用是避免点击发送按钮之后虚拟键盘回弹的问题
		}
	};
</script>



<style lang="scss">
	.container {
		display: flex;
		background-color: #FFFAE8;
		padding: 10px;
		align-items: center;

		border-radius: 65px;
		/* 添加border-radius属性，设置圆角 */

		position: fixed;
		right: 30rpx;
		left: 30rpx;
		bottom: 15px;
		// 让元素沉底
	}


	.input {
		flex: 1;
		height: 30px;
		border: none;
		border-radius: 5px;
		padding: 5px;
	}

	.button {
		margin-left: 10px;
		background-color: #F0F0F0;
		color: #000000;
		border: none;
		border-radius: 5px;
		padding: 5px 10px;
	}
</style>
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118