vue唤起键盘 底部固定的标签被顶上去

用vue做一个移动端的页面,页面中有表单,需要唤起键盘。页面中有一个logo是固定在页面最底端的,我用的position:fixed。但是问题出现了,一旦唤起键盘,logo就被键盘顶上去了,页面布局就被打乱了。遂百度一下,看了很多方法,找到一个最简单粗暴且有效的方法,在这里记录下来。

键盘弹起时,页面的高度变小了,而fix定位是根据屏幕(尤其是底部的位置)定位的,所以其位置自然随键盘上升。这时候我们在屏幕变小时将出现问题的标签隐藏,屏幕恢复时将标签显示就ok了。
重点是监听页面高度变化。
第一步:先在data中定义记录高度的属性,一个原始高度,一个变化后高度。

data () {
    return {
        docmHeight: document.documentElement.clientHeight,  //默认屏幕高度
        showHeight: document.documentElement.clientHeight,   //实时屏幕高度
        hidshow:true  //显示或者隐藏footer
    };
  },

第二步,页面挂载时取到页面的原始高度:

mounted() {
    // window.onresize监听页面高度的变化
    window.onresize = ()=>{
        return(()=>{
            this.showHeight = document.body.clientHeight;
        })()
    }
  },

第三步,watch监控高度并比较,判断标签是否显示;

watch:{
                showHeight() {
                    if(this.docmHeight > this.showHeight){
                        this.hidshow=false
                    }else{
                        this.hidshow=true
                    }
                }
              }

第四步,给标签加上v-show:

<div class="footer" v-show="hidshow">
      <div class="footerBtn">核验</div>
</div>

ok,问题解决,但是总感觉不是最完美的解决办法,所以先记录下来,以后想到好方法在修改。

方法是在这里看到的 [ 点击跳转参考原文]

### UniApp 中通过点击按钮唤起键盘的实现 在 UniApp 开发中,可以通过设置 `focus` 属性来控制输入框获取焦点并触发软键盘弹出。以下是具体实现方式: #### HTML 结构 定义一个 `<input>` 输入框以及一个用于触发软键盘弹出的按钮。 ```html <view> <button @click="triggerKeyboard">点击唤起键盘</button> <input type="text" ref="inputRef" style="display:none;" /> </view> ``` #### JavaScript 方法 利用 Vue 的 `$refs` 来动态操作 DOM 节点,使输入框获得焦点从而唤起键盘。 ```javascript export default { methods: { triggerKeyboard() { this.$nextTick(() => { // 确保 DOM 已更新后再执行 focus 操作 const input = this.$refs.inputRef; if (input && typeof input.focus === 'function') { input.focus(); // 设置输入框为聚焦状态以唤起键盘 } }); }, }, }; ``` 上述代码片段展示了如何通过绑定事件监听器,在用户点击按钮时让隐藏的输入框自动获取焦点[^1]。需要注意的是,为了不影响页面布局,可以将该输入框样式设为不可见 (`style="display:none;"`) 或者将其放置于页面底部区域而不影响其他 UI 元素显示效果。 另外一种情况涉及 PDA 设备上可能存在的特殊需求——即希望避免因默认行为而导致全屏覆盖式软键盘出现,则需额外配置相关属性或调整逻辑处理流程[^2]。 对于某些场景下可能出现的输入框被软键盘遮挡问题,可通过合理设置组件参数解决,例如使用 `cursor-spacing` 定义光标与可视边界之间的距离防止内容被掩盖[^3]。 ### 注意事项 - 如果目标平台支持自定义键盘功能(如 Android),则可进一步探索更灵活交互方案; - 需测试不同设备上的表现差异,确保兼容性和用户体验一致性;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值