由Vant Field组件得到解决IOS输入框 键盘上推问题

不才
• 阅读 1675

前言

前几天公司让写一个客户数据入录页面(就是个带了logo的表单页面),就直接选择用原生的直接上,原以为也就个把小时的事情(确实个把小时就写完了),但是测试发现ios(没有测试多个,至少qq浏览器会)会输入的时候导致页面上推严重影响用户体验。

可直接转第三部分

由开源库找到方案

Vant Field组件

通过看源码发现Field在blur事件时候会执行一个滚动事件

贴代码:reset-scroll.ts

// reset-scroll.ts
import { isIOS as checkIsIOS } from '../validate/system';
import { getRootScrollTop, setRootScrollTop } from './scroll';

const isIOS = checkIsIOS();

/* istanbul ignore next */
export function resetScroll() { // 触发blur事件后会执行该函数
  if (isIOS) {
   setRootScrollTop(getRootScrollTop());
  }
}

贴代码 system.ts

import { isServer } from '..'; // 不是很重要单纯的判断是不是服务器渲染
// ...
// 判断是不是ios 服务器渲染直接不判断
export function isIOS(): boolean {
  /* istanbul ignore next */
  return isServer
   ? false
   : /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase());
}

贴代码:scroll.ts

// 部分代码
// ...
export function getRootScrollTop(): number {
  return (
   window.pageYOffset ||
   document.documentElement.scrollTop ||
   document.body.scrollTop ||
   0
  );
}
// ...
export function setScrollTop(el: ScrollElement, value: number) {
  if ('scrollTop' in el) {
   el.scrollTop = value;
  } else {
   el.scrollTo(el.scrollX, value);
  }
}
// ...
export function setRootScrollTop(value: number) {
  setScrollTop(window, value);
  setScrollTop(document.body, value);
}
// ...

转换成原生代码 or 解决方案

逻辑

  1. 监听blur
  2. 判断是否是ios
  3. 滚动到原来的位置

代码

<style>
   input{
      /* 模拟输入框位置 */
      margin-top:500px;
   }
</style>
<input type="text" >

<script>
  // 检查是否是ios
   function checkIsIOS(){
      return /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase())
   }
   // 设置滚动元素(兼容性问题)
   function setRootScrollTop(value) {
      setScrollTop(window, value);
      setScrollTop(document.body, value);
   }
   // 设置滚动位置
   function setScrollTop(el, value) {
      if ('scrollTop' in el) {
        el.scrollTop = value;
      } else {
        el.scrollTo(el.scrollX, value);
      }
   }
   // 获取滚动位置
   function getRootScrollTop() {
      return (
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        0
      );
   }

   const isIOS = checkIsIOS();
   // 执行还原滚动条
   function resetScroll() { // 触发blur事件后会执行该函数
      if (isIOS) {
        //  这是滚动条位置
        setRootScrollTop(getRootScrollTop());
      }
   }
   const _input = document.querySelector('input');
    // 监听失去事件
   _input.onblur  = ()=>{
      console.log('onblur')
      resetScroll();
      // TODO: ...其他操作
   }
</script>

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
2年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
JS 苹果手机日期显示NaN问题
问题描述newDate("2019122910:30:00")在IOS下显示为NaN原因分析带的日期IOS下存在兼容问题解决方法字符串替换letdateStr"2019122910:30:00";datedateStr.repl
Stella981 Stella981
2年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
35岁是技术人的天花板吗?
35岁是技术人的天花板吗?我非常不认同“35岁现象”,人类没有那么脆弱,人类的智力不会说是35岁之后就停止发展,更不是说35岁之后就没有机会了。马云35岁还在教书,任正非35岁还在工厂上班。为什么技术人员到35岁就应该退役了呢?所以35岁根本就不是一个问题,我今年已经37岁了,我发现我才刚刚找到自己的节奏,刚刚上路。
京东云开发者 京东云开发者
5个月前
Java服务总在半夜挂,背后的真相竟然是... | 京东云技术团队
最近有用户反馈测试环境Java服务总在凌晨00:00左右挂掉,用户反馈Java服务没有定时任务,也没有流量突增的情况,Jvm配置也合理,莫名其妙就挂了
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这