div 固定在顶部 高度60px position: fixed; top: 0; z-index: 999;

页面内容div div里面有input框 ,这个input在电脑和手机上看都不会被键盘挡住的–也会把页面跳到最顶部。

div 页面底部 固定在底部

电脑端:当点击input框,电脑端正常,失去焦点,页面滚动到最顶端。忽略了我顶部有一个60px的固定div,而且也不应该让页面滚动才对。。

手机端:点击input,键盘弹出,输入文字,失去焦点,页面滚动到最顶部。。

期望的效果是:就算要兼容键盘弹出不被挡住的问题,我觉得这个可能应该交给浏览器来做吧,而且就算要滚动,也应该滚动到原始高度位置。。。

版本号vue-cli版本:2.0.0-alpha-26920200417001,我刚刚执行了npm update之后就发现这个问题了
用ide编辑器的2.6.12.20200412-alpha测试运行了下,是没有这个问题的。期望修复。

这个尤其是在电脑端上的体验很不好,随便点击一个输入框,移开鼠标在外部点击下,页面就跳位置了。。

测试地址 这个登录界面上有输入框,点击进去,在再外面点击下鼠标,页面就跳动 https://demo0527.95tp.cn/


·回复

我看到了,是 @DCloud_UNI_WYQ 这个小哥贴了一份代码

<script lang="renderjs" module="fixInput">    
    export default {    
        mounted() {    
            let inputEle = document.querySelector('.input input')    
            inputEle.addEventListener('blur',function(){    
                document.body.scrollIntoView()    
            })    
        }    
    }    
</script>

估计是这个导致的


·回复

找到问题了,在cli的uni提供h5的包里面,这个会导致失去焦点后,页面滚动到顶部

node_modules/@dcloudio/uni-h5/src/core/view/mixins/keyboard.js  

    onKeyboardHide () {  
      UniViewJSBridge.unsubscribe('hideKeyboard', this.hideKeyboardTemp)  
      document.removeEventListener('click', iosHideKeyboard, false)  
      this.resetSoftinputNavBar()  
      // 修复ios端显示与点击位置错位的Bug by:wyq  
      if (document.body.scrollIntoView) {  
        document.body.scrollIntoView()  
      }  
    }

·回复

已确认Bug,感谢反馈

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Scroll Up