h5 ios输入框和键盘的兼容性优化指南

2024-09-29 00:53:17

起因

h5的输入框引起键盘导致体验不好，目前就算微信、知乎、百度等产品也没有很好的技术方案实现，尤其底部固定位置的输入框各种方案都用的前提下体验也并没有很好，这个问题也是老大难问题了。目前在准备一套与native协议来解决这个问题，目前项目中的解决方案还是有值得借鉴的地方的，分享一下

下面话不多说了，来一起看看详细的介绍吧

业务场景

固定在h5页面底部的输入框

无论是使用

<input />

还是

 <div contenteditable="true">
 </div>

在聚焦事件触发调起原生键盘时，在ios部分机型(iphone 4s iphone 5等)上会使得键盘弹起后遮挡住输入框，使得用户体验不好。

目前的解决方案是写一个定时任务，在判定是ios打开页面时，执行以下函数

let timer = setInterval(()=>{
 // container 知道整个容器的dom节点
 container.scrollIntoView({
 block: 'start',
 behavior: 'auto'
 })
},300); //300毫秒是经过多次试验得到的数值，用户体验为佳

关于scrollIntoView

scrollIntoView这个API，官方的解释是

The Element.scrollIntoView() method scrolls the element on which it's called into the visible area of the browser window.

语法

element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数

参数

参数	说明	类型	可选值	默认值
alignToTop	--	boolean	---	false
scrollIntoViewOptions	--	object	--	--

{
 behavior: "auto" | "instant" | "smooth",
 block: "start" | "end",
}

在can i use中查到的scrollIntoView的兼容性（主流浏览器中不考虑ie）

Firefox 36 以上兼容
chrome 61 以上兼容
safiri 5.1开始不兼容behavior中的smooth

后续问题

当然，这个解决方案智能解决部分机型的问题，要真正解决这个问题还是要依靠native端。

在ios 和安卓机型的问题

因为设置了这个定时任务，就会有一个后续的问题出现，也是在落地项目中有遇到过的，在此说明一下。

在上拉或下拉到头时，会出现背景白色的现象，因为有了这个定时器，它就会不断将视图拉回，导致页面抖动。
如果在app层做了webview禁止拖动的话就不会有这个问题，当然不能完全依赖app，在程序中我们也需要做此方面的兼容优化。

 <div class="container"
   @touchStart="touchStart($event)"
   @touchEnd="touchEnd($event)">

 </div>

 touchStart(e) {
 this.clearTimer();
 },
 touchEnd(e) {
 this.repairIosInput();
 },
 clearTimer() {
  if(this.timer) {
   clearInterval(this.timer);
   this.timer = null;
  }else{
   return;
  }
 },
 repairIosInput() {
  if(this.timer) {
   return;
  }
  this.timer = setInterval(()=>{
   container.scrollIntoView({
   block: 'start',
   behavior: 'auto'
   })
  },300);
 }

在开始拉动页面时清空定时器，停止拉动时开启定时器，这样就可以解决造成的抖动的问题了。

总结

做为一个老大难的问题，还会用更多的解决方案，请与我联系，一起讨论，早日脱坑！

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

iOS使用UIKeyInput自定义密码输入框的方法示例

前言开发中很多地方都会遇到密码输入,这时候往往需要根据UI设计自定义.这里遵守UIKeyInput,实现协议中的方法,让自定义View可以进行文字输入:再通过func draw(_ rect: CGRect)绘制现自定义UI:使用配置类来统一接口:使用代理来管理各种输入相关的事件.文章末尾有提供OC和Swift双语的CLDemo下载,这里讲解就使用Swift. 1.遵守UIKeyInput协议,实现文字输入遵守UIKeyInput协议,实现协议中- (BOOL)hasText. - (voi
iOS中输入框设置指定字符输入的方法

前言对于开发者来说,在很多情况下,一般的输入框需要按照要求进行输入,输入内容由开发人员来指定.例如:密码输入框只能输入纯数字或者是拼音与数字结合的文本等,那么我们在开发的时候就需要做一些输入文本的限时.下面话不多说了,来一起看看详细的介绍吧. 一.只能输入纯数字在这里以UITextField为例:其实现代码如下: - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range re
iOS输入框的字数统计/最大长度限制详解

前言前两周我们发了一个小集「iOS 自带九宫格拼音键盘与 Emoji 表情之间的坑」,介绍了如何解决由于输入框限制 Emoji 表情的输入导致中文拼音也无法输入的问题. 后面我们又有了新需求:对输入框已输入的文本字数进行实时统计,并在界面上显示剩余字数,且不能让所输入的文本超过最大限制长度.但这个简单的功能仍然有不少小坑. 在上一个小集中,我们讲到,对于 iOS 系统自带的键盘,有时候它在输入框中填入的是占位字符(已被高亮选中起来),等用户选中键盘上的候选词时,再替换为真正输入的字符,如下:
iOS实现聊天输入框功能

经常使用微信聊天,没事儿就会想输入框的实现过程,所以抽空,也实现了一个输入框的功能: 经过封装,使用就非常的简单了,在需要的VC中,实现方法如下: - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor colorWithRed:0.92 green:0.92 blue:0.92 alpha:1.00]; self.keyView = [[DKSKeyboardView alloc] init
iOS输入框(UITextField)密码明暗文切换方法

在做明暗文切换(密码输入框)的时候遇见一个坑,就是切换secureTextEntry的时候,输入框的光标会偏移,下面列出了一个解决办法及一种明暗文切换的方法 - (IBAction)pwdTextSwitch:(UIButton *)sender { // 前提:在xib中设置按钮的默认与选中状态的背景图 // 切换按钮的状态 sender.selected = !sender.selected; if (sender.selected) { // 按下去了就是明文 NSString *temp
iOS实现类似微信和支付宝的密码输入框（UIKeyInput协议）

目前在项目中需要实现发红包的功能,自己就写了一个密码输入框的控件,主要用到了UIKeyInput协议和CoreGraphics框架,效果类似微信支付,感觉还行就把我的思路和制作过程写下来给大家分享一下. 让你的自定义View具备输入的功能(UIKeyInput协议) 通过UIKeyInput协议可以为响应者提供简单的键盘输入的功能,让需要键盘的responder成为第一响应者就行了.UIKeyInput协议必须实现的有三个方法,分别是以下方法: #pragma mark - UIKeyInput
iOS项目开发键盘弹出遮挡输入框问题解决方案

在iOS或Android等移动端开发过程中,经常遇到很多需要我们输入信息的情况,例如登录时要输入账号密码.查询时要输入查询信息.注册或申请时需要填写一些信息等都是通过我们键盘来进行输入的,在iOS开发过程中,一般用于进行输入信息的有两类:UITextField和UITextView,前者是单行输入文本框,后者是可滑动的多行输入文本框,在这整个开发过程中,我们需要控制键盘的弹出和收起.在输入结束的时候获取输入的信息,此外,我们还需要保证在键盘弹起的时候不遮挡我们输入的文本框.今天,我们就主要来说一
解决ios手机中input输入框光标过长的问题

在项目中做移动端页面,发现IOS 的光标大小很大,和安卓的完全不一样,思考怎么调整大小,通过实践和尝试,找到了解决方法,现分享给大家. 修改前css部分代码: .receiving-info .receiving-info-list input { display: inline-block; width: 70%; font-size: 14px; color: #333; border: none; outline: none; line-height: 50px; } 修改后css部分代码
IOS 键盘挡住输入框的问题解决办法

IOS 键盘挡住输入框的问题解决办法在iOS开发发现一个问题,有时输入框位于低出时,当编辑输入时,弹出的键盘会挡住输入框,令用户看不清楚实时的输入情况,使界面交互极度不友好. 经过查资料终于解决了这个问题. 解决思路: 1. 输入框监听UIControlEventEditingDidBegin事件,当用户开始输入时,将整个view上移. 2. 输入框监听UIControlEventEditingDidEnd事件,当用户结束输入时,将整个view下移,恢复到原位置. 输入框监听事件: [text
h5 ios输入框和键盘的兼容性优化指南

起因 h5的输入框引起键盘导致体验不好,目前就算微信.知乎.百度等产品也没有很好的技术方案实现,尤其底部固定位置的输入框各种方案都用的前提下体验也并没有很好,这个问题也是老大难问题了.目前在准备一套与native协议来解决这个问题,目前项目中的解决方案还是有值得借鉴的地方的,分享一下下面话不多说了,来一起看看详细的介绍吧业务场景固定在h5页面底部的输入框无论是使用 <input /> 还是 <div contenteditable="true"> &l
iOS实现输入框跟随键盘自动上移的实例代码

场景还原有些时候在包含输入框的页面中,点击输入框输入会因键盘弹起而遮挡住一部分输入框,影响用户体验.iOS在默认情况下并不会处理这种问题,不过我们可以自己实现键盘弹起输入框自动上移的效果. 实现思路观察键盘的弹起与收回,当弹起的键盘会遮挡住输入框时,将输入框跟随键盘一并上移合适的距离,当键盘收回时,输入框回到原始状态. 具体方案 1. 注册两个观察者,观察键盘的弹起与收回 [[NSNotificationCenter defaultCenter] addObserver:self selec
解决Android软键盘弹出覆盖h5页面输入框问题

之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面输入框问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位置触发条件:输入框获取焦点,弹出软键盘表现:软键盘覆盖 h5页面中的输入框问题分析: 1.发现问题:当前页面中box为flex布局,内容为上下固定高,中间自适应(中间区域内容过多会出现滚动条,input框在wrapper的底部),input获取焦点,手机键盘弹出,input未上移到可视区内,
解决ios h5 input输入框被输入法弹出一块区域的问题

问题:如下图解决方案 scrollIntoView scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐 /** * * 使用方法输入框中 onclick="sr(this);" onblur="nosr(this)" */ var timer1; function sr(obj) { timer1 =
IOS开发中键盘输入屏幕上移的解决方法

在IOS开法中经常会遇到键盘遮挡屏幕的事情(比如输入账号密码验证码等等),就使得原本都不大的屏幕直接占了一半甚至更多的位置,这倒无所谓,关键是挡住了下面的按钮.这样的话按钮的事件也就触发不了,最好的解决办法就是当输入这些信息的时候让整个屏幕上移一个键盘的位置,或者上移到指定的位置. 首先一般输入的话都用的是UITextField,所以要监听用户什么时候开始输入和什么时候结束输入,直接设置代理代理就行了,要遵受 UITextFieldDelegate协议. //遵循协议 @interface Vi
iOS开发第三方键盘处理实例代码

最近项目中遇到了键盘处理通知被调用多次的情况,废了好半天时间才找到解决办法,今天就给小伙伴儿们唠唠第三方键盘处理的那些坑! 详情请看:『https://github.com/boai/BAKeyboardDemo』 ! 1.聊天评论框的封装先聊聊我项目中遇到的奇葩情况吧,一个直播界面,上面播放器,下面是分段控制器5个button,5个界面,其中三个界面最下面都是评论框,所以就封装了一个评论框公用. 但是本来用的『IQKeyboardManager』,开源键盘处理框架,可是在同一个界面有多个评论
iOS关闭虚拟键盘方法汇总

在iOS应用开发中,有三类视图对象会打开虚拟键盘,进行输入操作,但如何关闭虚拟键盘,却没有提供自动化的方法.这个需要我们自己去实现.这三类视图对象分别是UITextField,UITextView和UISearchBar. 这里介绍一下UITextField中关闭虚拟键盘的几种方法. 第一种方法,使用它的委托UITextFieldDelegate中的方法textFieldShouldReturn:来关闭虚拟键盘. 在UITextField视图对象如birdNameInput所在的类中实现这个方法
iOS自定义身份证键盘

本文实例为大家分享了iOS自定义身份证键盘的具体代码,供大家参考,具体内容如下项目中有需要需要身份证的输入框, 用自带的输入切换很麻烦(如果最后一位带X), 所以自定义一个身份证输入键盘. 自定义键盘的关键: self.textField.inputView = [自定义的view], 支持长按一直删除 demo地址开始自定义 1. 创建一个集成自UIView的视图 (NYLIDKeyBoard) NYLIDKeyBoard.h // // NYLIDKeyBoard.h // lqz //
iOS让软键盘消失的简单方法

一些文本输入控件等待输入时会弹出软键盘,我们可以设置这些控件的Did End On Exit之类的回调方法以在用户点击软键盘上的done或return之列的按键时收起键盘. 不过某些时候有些键盘没有上述的按键,或者我们希望点击App视图的背景时使软键盘收起来,无论当时软键盘是否打开. 一种办法是拖动一个按钮到View上,然后使其大小和View相同,然后设置点击该按钮的回调. but,我们还可以有更简单的方法. 我们知道UIView本身没什么Action,不过它的子类UIControl却有不少,所

h5 ios输入框和键盘的兼容性优化指南

相关推荐

随机推荐