問題是這樣的 input 獲取焦點(diǎn)時(shí)會(huì)自動(dòng)調(diào)起手機(jī)鍵盤，設(shè)置 :adjust-position=“true”，會(huì)導(dǎo)致鍵盤彈起時(shí)頁面整體上移，這篇文章主要介紹了解決 uni-app 微信小程序 input 輸入框在底部時(shí)，鍵盤彈起頁面整體上移問題
input 獲取焦點(diǎn)時(shí)會(huì)自動(dòng)調(diào)起手機(jī)鍵盤，設(shè)置:adjust-position=“true”，會(huì)導(dǎo)致鍵盤彈起時(shí)頁面整體上移
- 設(shè)置使鍵盤彈起使頁面不上移
- 設(shè)置輸入框所在盒子為絕對(duì)定位
- 鍵盤彈起時(shí)獲取鍵盤高度
- 設(shè)置輸入框所在盒子的 bottom 的鍵盤高度
<input
class="TUI-message-input-area"
:adjust-position="false" // 修改為 false，使鍵盤彈起頁面不上移
cursor-spacing="20"
v-model="inputText"
@input="onInputValueChange"
maxlength="140"
type="text"
placeholder-class="input-placeholder"
placeholder="說點(diǎn)什么呢~"
@focus="inputBindFocus" // 添加獲取焦點(diǎn)鍵盤彈起事件
@blur="inputBindBlur" // 添加失去焦點(diǎn)鍵盤隱藏事件
/>
inputBindFocus(e) {
// 獲取手機(jī)鍵盤的高度，賦值給input 所在盒子的 bottom 值
// 注意!!! 這里的 px 至關(guān)重要!!! 我搜到的很多解決方案都沒有說這里要添加 px
this.$emit('changeBottomVal', e.detail.height + 'px')
},
inputBindBlur() {
// input 失去焦點(diǎn)，鍵盤隱藏，設(shè)置 input 所在盒子的 bottom 值為0
this.$emit('changeBottomVal', 0)
}
CSS
.message-input {
flex-shrink: 0;
width: 100%;
position: absolute; // input 所在盒子設(shè)置絕對(duì)定位
left: 0;
bottom: 0; // 默認(rèn) 0
z-index: 199;
}
文章來源地址http://www.zghlxwxcb.cn/news/detail-751675.html
文章來源：http://www.zghlxwxcb.cn/news/detail-751675.html
到了這里，關(guān)于解決 uni-app 微信小程序 input 輸入框在底部時(shí)，鍵盤彈起頁面整體上移問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[Uni-app] 微信小程序的圓環(huán)進(jìn)度條](https://imgs.yssmx.com/Uploads/2024/04/861659-1.png)
