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

不才 等级 741 0 0
标签: iosJavascript

前言

前几天公司让写一个客户数据入录页面(就是个带了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>

收藏
评论区

相关推荐

【Flutter 实战】安装Flutter
1.3 搭建Flutter开发环境工欲善其事必先利其器,本节首先会分别介绍一下在Windows和macOS下Flutter SDK的安装,然后再介绍一下配IDE和模拟器的使用。 1.3.1 安装Flutter由于Flutter会同时构建Android和IOS两个平台的发布包,所以Flutter同时依赖Android SDK和iOS SDK,在安装Fl
由Vant Field组件得到解决IOS输入框 键盘上推问题
前言 前几天公司让写一个客户数据入录页面(就是个带了logo的表单页面),就直接选择用原生的直接上,原以为也就个把小时的事情(确实个把小时就写完了),但是测试发现ios(没有测试多个,至少qq浏览器会)会输入的时候导致页面上推严重影响用户体验。 可直接转第三部分 由开源库找到方案 Vant Field组件通过看源码发现Field在bl
IOS 6 自动布局 入门 2
来自Ray:恭喜各位!你们已经通过宣传[ios feast](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.raywenderlich.com%2F20912%2Fintroducing-the-ios-6-feast)提前解锁了第一个有关IOS6的教程。 目前这份教程只是我们的新
IOS中键盘自动隐藏
### 前言 很多时候当我们在一个文本框中输入信息后,按了确认或者返回键需要隐藏键盘,或者在其他空白区域点击屏幕后也需要隐藏屏幕。 这时肯定就需要让相应的控件响应Tap事件(点击事件),这样我们才能处理。 ### 实现隐藏的两种方法 在IOS中有一个概念叫First Responder,意指第一响应者,也就是当前屏幕上,处于焦点状态的控件,它是第一响
IOS全局变量
IOS中的全局变量和JAVA中的全局变量定义和使用方法不一样,在Java中,只需要将变量定义为static就行了。而在IOS中这种方法不适合。 IOS中定义全局变量有三种方法: 1.使用extern关键字 在AppDelegate.m或AppDelegate.h中写入你需要的全局变量名,例如:int  name;注意定义全局变量时候不能初始化,否则报错
IOS定位服务的应用
IOS定位服务的应用 ---------- ### 一、授权的申请与设置 在IOS8之后,IOS的定位服务做了优化,若要使用定位服务,必须先获取用户的授权。 首先需要在info.plist文件中添加一个键:NSLocationAlwaysUsageDescription或者NSLocationWhenInUseUsageDescription。其中NS
(转)直接拿来用!最火的iOS开源项目(二)
“每一次的改变总意味着新的开始。”这句话用在iOS上可谓是再合适不过的了。GitHub上的iOS开源项目数不胜数,iOS每一次的改变,总会引发iOS开源项目的演变,从iOS 1.x到如今的iOS 7,有的项目已经被弃用,即使曾经的它很受开发者喜爱,有的项目则继续发扬光大,新项目更是层出不穷。在本文中,我们将继续为大家介绍20个在GitHub上非常受开发者欢迎
IOS
还是实现如下布局 ![](http://static.oschina.net/uploads/space/2016/1101/113703_wHZ1_2886189.png) 这次在StoryBoard里面,创建TableViewCell,并修改Identifier为cellname ![](http://static.oschina.net/uplo
500G 史上最全的JAVA全套教学视频网盘分享
**500 G JAVA视频网盘分享(JEECG开源社区)** =============================== **\[涵盖从java入门到深入架构,Linux、云计算、分布式、大数据Hadoop、ios、Android、互联网技术应有尽有\]** > 500 G JAVA视频网盘分享(JEECG开源社区) > \[涵盖从java入门
GitHub 上有哪些完整的 iOS
**1\. Coding iOS 客户端** Coding官方客户端. 笔者强烈推荐的值得学习的完整APP. [GitHub - Coding/Coding-iOS: Coding iOS 客户端源代码](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Flink.zhihu.com%2
IOS 利用core text对文字进行排版
core text 这个包默认是没有的,要自己手动添加进来。 在IOS中利用core text对文本进行排版的几个关键点如下: 字间距:kCTKernAttributeName 行间距:kCTParagraphStyleSpecifierLineSpacingAdjustment 或 kCTParagraphStyleSpe
IOS推送消息怎么实现icon图标的数字累加
[IOS推送消息怎么实现icon图标的数字累加](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.cnblogs.com%2Fqiqibo%2Farchive%2F2012%2F08%2F26%2F2657379.html) ==============================
ListView中重写overScrollBy()方法 实现拉出回弹结果
第一项目组  道理解析 IOS上的bounce功能给人的感触感染很爽,当一个可以迁移转变的区域被拖到鸿沟时,它容许用户将内容拖过界,甩手后再弹回来,以一种很是棒的体式格式提示了用户鸿沟的存在,是IOS的一大特点。android2.3新增了overscroll功能,听名字就知道应当是bounce功能的翻版,但也许是出于专利方面的推敲,google的默
Shop Online with AR Quick Look
> 作者: Chafferer,iOS 开发者,目前就职于手百 iOS 基础研发组。 > > > > Sessions: https://developer.apple.com/videos/play/wwdc2020/10604/ 前言 -- 从 iOS 12 开始,苹果引入了 `AR Quick Look`,这是 3D 内容的内置全系统的
SwiftCommon之Dictionary字典
### 概述 Dictionary类型是IOS开发中用的很多的一种数据类型,通过键值对来保存数据。在Swift中对应Dictionary类型,而IOS的原生库中对应的NSDictionary类,两者是可以相互转换的。 SCDictionary使用extension扩展为NSDictionary增加几个常用方法。 ### SCDictionary