ios输入框的坑(软键盘弹出不灵敏、输入法影响弹出高度)

参考地址：

https://segmentfault.com/a/1190000018959389
https://blog.csdn.net/github_37533433/article/details/66471962

1.首先，是这样的布局：父容器里面放一个输入框和一个按钮

思路是：父容器fixed定位，bottom为0，left为-100%；flex布局；在其他事件触发输入框出现的时候（例如一个评论的icon），父容器 left值变为0，被软键盘顶上来。

<div class="ipt-box" :class="{iptfcs:showCipt}">    <input @blur="resetipt()" v-model="commenttxt"  ref="ctxt"><p @click="commentcircle()">发送</p>
</div>.ipt-box {position: fixed;left: -100%;bottom: 0;width: 100%;z-index: 9999999;display: flex;align-items: center;&.iptfcs {left: 0;}
}

好吧，结果是根本顶不上来！需要多加一层父容器！

2.其次，是这样的布局：父容器—父容器—输入框+按钮

<div class="ipt-box" :class="{iptfcs:showCipt}"><div class="ipt-box-cont"><input @blur="resetipt()" v-model="commenttxt"  ref="ctxt"><p @click="commentcircle()">发送</p></div>
</div>.ipt-box {position: fixed;left: -100%;bottom: 0;width: 100%;z-index: 9999999;&.iptfcs {left: 0;}.ipt-box-cont{width: 100%;display: flex;align-items: center;}
}

这样做，终于是顶上来了。点击评论icon，showCipt 设置为true后，this.$refs.ctxt.focus() 聚焦准备书写。但是ios出现点击聚焦不灵敏的情况！需要强制聚焦！

3.打开fastclick插件，将focus方法加入一行，强制聚焦：

   FastClick.prototype.focus = function(targetElement) {var length;if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {length = targetElement.value.length;targetElement.focus();  //新增这一行targetElement.setSelectionRange(length, length);} else {targetElement.focus();}};

这下点击一次就可以聚焦了，而且经过我的iphone7系统输入法测试，没有出现什么问题，当我切换搜狗输入法后，悲剧又发生了，遮挡一半！！换了xr测试,完全遮挡！！！！

4.输入法兼容问题有哪些

确实大部分 Android 浏览器是没问题的，但是测试在 IOS 上，UC 浏览器配合原生输入法和第三方输入法（比如搜狗输入法），输入框都会被完全挡住；QQ 浏览器或微信浏览器，配合第三方输入法，输入框会被遮住一半；百度浏览器配合第三方输入法输入框也会被完全遮住。

5.软键盘弹起，在安卓上是缩小了内容区域的高度，软键盘将下半部分进行遮挡；ios上则是整个webview整体上移，改变了整个内容区域的scrollTop值。

经过筛选，最终选择使用定时器，思路如下：

点击触发input
在获取焦点（软键盘弹起）前，先将页面的scrollTop值存起来
获取焦点
判断浏览器类型,如果是ios，设置定时器，将此时内容的高度值赋值给浏览器当前滚动高度（确保完全显示）
失去光标
判断浏览器类型,若为ios,清除定时器，并设置浏览器当前滚动高度值为一开始键盘未弹起的scrollTop值

//解决第三方软键盘唤起时底部input输入框被遮挡问题var bfscrolltop = document.body.scrollTop;//获取软键盘唤起前浏览器滚动部分的高度$("input.inputframe").focus(function(){//在这里‘input.inputframe’是我的底部输入栏的输入框，当它获取焦点时触发事件interval = setInterval(function(){//设置一个计时器，时间设置与软键盘弹出所需时间相近document.body.scrollTop = document.body.scrollHeight;//获取焦点后将浏览器内所有内容高度赋给浏览器滚动部分高度},100)}).blur(function(){//设定输入框失去焦点时的事件clearInterval(interval);//清除计时器document.body.scrollTop = bfscrolltop;将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度});

应用在我的代码里面：

//点击评论icon，触发软键盘弹起commentFocus(cid) {let _this = this;_this.scrollerval = document.body.scrollTop;_this.showCipt = true;_this.$refs.ctxt.focus();if (navigator.userAgent.indexOf('iPhone') > -1||navigator.userAgent.indexOf('iPad') > -1){_this.timer = setInterval(function () {document.body.scrollTop = document.body.scrollHeight;},1000);}},

//失去光标resetipt() {let _this = this;_this.showCipt = false;if (navigator.userAgent.indexOf('iPhone') > -1 || navigator.userAgent.indexOf('iPad') > -1){clearInterval(_this.timer);document.body.scrollTop = _this.scrollerval;}},

当然，把浏览器类型存起来用更好啦！

然后，就可以洗洗睡了！！！

ios输入框的坑(软键盘弹出不灵敏、输入法影响弹出高度)相关推荐

移动端iOS中input输入框搜索框软键盘出现换行而不是搜索
iOS输入框搜索时软键盘出现换行而不是搜索,而且点击软键盘完成按钮不会执行搜索事件, 解决一,必须使用form表单提交,但是键盘出现搜索,ajax请求方法中得不到input的值, 解决,form表单上 ...
layer弹窗在IOS上，被软键盘挤到上边的解决方法
就像这种情况,经过多番请教跟尝试,找到一个能解决这个问题的方法,但可能有点笨重.就是在当前弹框里,设置offset的值,里边的值可以随意写,然后再下边给弹框追加一个样式即可. <!DOCTYPE ...
web端ios布局fixed元素软键盘唤起时fixed失效
在ios上做了一个简单的页面头部置顶底部置顶源码如下: <!DOCTYPE html> <html lang="en"> <head><m ...
vue 全局键盘_如何解决ios input框唤起软键盘不灵敏问题？
为什么移动端点击事件要加300ms延迟呢? 早在 2007 年初,苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPh ...
IOS开发之隐藏软键盘
1. 函数A里面有: textFiled.inputView=[[UIView alloc]initWithFrame:CGRectZero]; //这一行成功的出现光标,没有键盘函数B里面有 ...
IOS实现点击软键盘的Next/Return按钮或者空白处后自动隐藏键盘
在开发IOS过程中,经常需要用到TextField控件.光标一旦定位到该控件,软键盘就会自动开启,用户能够在其中通过软键盘进行输入.但是,若不对软键盘进行其他操作,它是不会自动关闭的.这样就很有可能降 ...
H5 iOS 自动调起软键盘
h5开发的时候,自动调起软键盘一般在安卓里没毛病,但是在IOS 里死活不好用,试过N多办法,举几个例子吧 eg1:点击其他内容,给input自动加点击 this.$refs.inputDetail.d ...
iOS自动自动隐藏软键盘
自动隐藏软键盘,分为两步,一个是单击软键盘外部任意空间:另外一个是单击软键盘上的return键.下面依次实现单击软键盘外部空间键隐藏软键盘: 一:在viewDidLoad中添加一个UITabGest ...
ios 开发中关闭软键盘的方法
文本框输入后关闭键盘: demoViewController.h 添加 - (IBAction)textFieldDoneEditing:(id)sender; demoViewController. ...

ios输入框的坑(软键盘弹出不灵敏、输入法影响弹出高度)

1.首先，是这样的布局：父容器里面放一个输入框和一个按钮

2.其次，是这样的布局：父容器—父容器—输入框+按钮

3.打开fastclick插件，将focus方法加入一行，强制聚焦：

4.输入法兼容问题有哪些

5.软键盘弹起，在安卓上是缩小了内容区域的高度，软键盘将下半部分进行遮挡；ios上则是整个webview整体上移，改变了整个内容区域的scrollTop值。

ios输入框的坑(软键盘弹出不灵敏、输入法影响弹出高度)相关推荐

最新文章

热门文章

ios输入框的坑(软键盘弹出不灵敏、输入法影响弹出高度)

1.首先，是这样的布局：父容器里面放一个输入框 和一个按钮

2.其次，是这样的布局：父容器—父容器—输入框+按钮

3.打开fastclick插件，将focus方法加入一行，强制聚焦：

4.输入法兼容问题有哪些

5.软键盘弹起，在安卓上是缩小了内容区域的高度， 软键盘将下半部分进行遮挡；ios上则是整个webview整体上移，改变了整个内容区域的scrollTop值。

ios输入框的坑(软键盘弹出不灵敏、输入法影响弹出高度)相关推荐

最新文章

热门文章

1.首先，是这样的布局：父容器里面放一个输入框和一个按钮

5.软键盘弹起，在安卓上是缩小了内容区域的高度，软键盘将下半部分进行遮挡；ios上则是整个webview整体上移，改变了整个内容区域的scrollTop值。