<template>
	<view class="container">
		<view class="input-section">
			<input id="uni-input-box" class="input-box" type="text" :value="inputValue" placeholder="点击输入框显示键盘" :focus="isFocus" hold-keyboard="true" />
			<button class="btn" @click="hideKeyboard">隐藏键盘</button>
		</view>
		<view class="info-section">
			<text class="info-text">键盘高度: {{keyboardHeight}}px</text>
			<text class="info-text">键盘状态: {{keyboardStatus}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputValue: '',
        isFocus: false,
				keyboardHeight: 0,
				keyboardStatus: '未显示'
			}
		},
		onLoad() {
			// 监听键盘高度变化
			uni.onKeyboardHeightChange(res => {
				this.keyboardHeight = res.height;
				this.keyboardStatus = res.height > 0 ? '显示中' : '已隐藏';
			});
		},
		onUnload() {
			// 页面卸载时移除监听
			uni.offKeyboardHeightChange();
		},
		methods: {
			hideKeyboard() {
				uni.hideKeyboard();
			}
		}
	}
</script>

<style>
.container {
	padding: 20px;
}
.input-section {
	margin-bottom: 20px;
}
.input-box {
	width: 100%;
	height: 40px;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 0 10px;
	margin-bottom: 10px;
}
.btn {
	background-color: #007AFF;
	color: #fff;
}
.info-section {
	margin-top: 20px;
}
.info-text {
	width: 100%;
	margin-bottom: 10px;
	font-size: 16px;
	color: #333;
}
</style>