zoukankan      html  css  js  c++  java
  • H5,input,textarea输入时,软键盘弹起不能自动收回(ios,安卓正常)

    下方图片中的按钮下面大片空白就是手机软键盘没有折回出现的,如果在软键盘没有恢复就点击按钮进行操作,页面按钮失效,页面卡顿不能操作了,所以影响还是很大的,查询过原因是因为微信改版出现了这种现象。
    解决方式参考:

    //键盘收起以后页面缩回
    $(".form input").on("blur",function(){
       var toFix=$(this).offset().top;
       window.scroll(0,toFix);//失焦后强制让页面归位
    });
    
    <textarea class="textarea" @blur.prevent="inputLoseFocus" placeholder="xxx" v-model.trim="rejectReason"></textarea>
    // 解决调起手机软键盘页面被顶到底部再关闭软键盘页面底部留白的问题
    inputLoseFocus() {     
       setTimeout(() => {
           var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
           window.scrollTo(0, Math.max(scrollHeight - 1, 0));
       }, 100);
    }
    

    window.scrollTo()滚动动画

    先构造scrollAnimation方法

    动画垂直滚动到页面指定位置

    $param currentY 当前位置
    $param targetY 目标位置

    function scrollAnimation(currentY, targetY) {
     // 获取当前位置方法
     // const currentY = document.documentElement.scrollTop || document.body.scrollTop
     // 计算需要移动的距离
     let needScrollTop = targetY - currentY
     let _currentY = currentY
     setTimeout(() => {
       // 一次调用滑动帧数,每次调用会不一样
       const dist = Math.ceil(needScrollTop / 10)
       _currentY += dist
       window.scrollTo(_currentY, currentY)
       // 如果移动幅度小于十个像素,直接移动,否则递归调用,实现动画效果
       if (needScrollTop > 10 || needScrollTop < -10) {
         scrollAnimation(_currentY, targetY)
       } else {
         window.scrollTo(_currentY, targetY)
       }
     }, 1)
    }
    
  • 相关阅读:
    类似Sina新浪滑动门代码
    纯CSS无JS实现灰色下拉导航菜单代码
    滑动门与选项卡互转的实现方法代码
    一款横向、竖向两个选项卡Tab一起联动的导航代码
    C#Brush的使用(转载)
    泛型学习笔记(转载)
    Application之间共享MasterPage(转载)
    ReportView学习笔记一(转载)
    BackGroundWorker学习
    加下划线的TextBox
  • 原文地址:https://www.cnblogs.com/lisaShare/p/12561376.html
Copyright © 2011-2022 走看看