zoukankan      html  css  js  c++  java
  • IOS中input失焦后,点击没反应的问题

    原因是因为

      在弹出层点击input时调起键盘,页面会被顶上去document.body.scrollOffset大于0,收起键盘时scrollOffset不变,造成焦点错位。
    安卓手机点击时调起键盘不会把页面顶上去,会改变窗口高度变化,收起时不会造成影响

    var u = navigator.userAgent;
      var flag;
      var myFunction;
      var isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isIOS) {
        document.body.addEventListener('focusin', () => {  //软键盘弹起事件
          flag = true;
          clearTimeout(myFunction);
        })
        document.body.addEventListener('focusout', () => { //软键盘关闭事件
          flag = false;
          if (!flag) {
            myFunction = setTimeout(function () {
              window.scrollTo({ top: 0, left: 0, behavior: "smooth" })//重点  =======当键盘收起的时候让页面回到原始位置(这里的top可以根据你们个人的需求改变,并不一定要回到页面顶部)
    
            }, 200);
          } else {
            return
          }
        })
      } else {
        return
      }
    

      还有一种方法 但是我没有验证是否可以

    $('input,select').on('blur',function(){
        $(window).scrollTop(0)
    })
    监听 blur事件 失去焦点滚动到底部或者顶部一类的

     

  • 相关阅读:
    多表连接查询
    从0开始独立完成企业级Java电商网站开发(服务端)
    ThreadLocal小试牛刀
    svn版本控制
    策略模式和工厂模式搭配使用
    MyBatis-Plus
    github骚操作
    【测试】 Java如何优雅的生成测试数据
    【随笔】开源之殇
    【Maven】maven 插件开发实战
  • 原文地址:https://www.cnblogs.com/wang-xx/p/14863233.html
Copyright © 2011-2022 走看看