当前位置:   article > 正文

uniapp 微信小程序 输入框跟随手机键盘弹起

uniapp 微信小程序 输入框跟随手机键盘弹起

需求:手机键盘弹起后,页面底部的输入框跟随弹起,且页面不被顶上去

html:

  1. <textarea
  2. class="textinput"
  3. placeholder-class="input-place"
  4. auto-height
  5. :maxlength="2000"
  6. v-model="text"
  7. placeholder="在此输入您想要我研究的问题"
  8. :show-confirm-bar="false"
  9. :adjust-position="false"
  10. @keyboardheightchange="keyboardMove"
  11. ></textarea>

js:

  1. const inputBottom = ref(null)
  2. const keyboardMove = (e) => {
  3. if (e.detail.height) {
  4. showRect.value = false
  5. } else {
  6. showRect.value = true
  7. }
  8. inputBottom.value = e.detail.height
  9. }

css:

  1. textarea {
  2. max-height: 160rpx !important;
  3. overflow-y: hidden;
  4. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/367655
推荐阅读
相关标签
  

闽ICP备14008679号