在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
问题1：H5 web 移动端 输入框, 键盘唤起后fixed定位好的元素跟随页面滚动了起来… fixed属性失效了！满屏任性横飞, 如下图:
问题2：有第三方输入法的ios机还会出现键盘弹出延迟，导致普通布局 输入框(input/textarea等) 位置靠下的被键盘挡住, 如下图:
(这个'完成'出来, 然后'键盘'再顶起)
完美解决方案
.scrollWrapper {
bottom: 0;
bottomInput {
&div class="scrollWrapper"&
&div class="bottomInput"&
&input type="text" placeholder="input"/&
// javascript
// 在输入框获取焦点, 键盘弹起后, 真的是一行代码
var interval = setInterval(function() {
document.body.scrollTop = document.body.scrollHeight
注意: 下面解决ios键盘问题的是之前的旧方法, 还是有瑕疵, 可跳过看其他
不让页面整体滚动, 绝对布局滚动内容, 局部滚动.
键盘完全弹出时, 判断键盘是否在可视区域(即屏幕除去键盘占用的区域)
通过js来调整输入框的位置;
键盘完全收起后, 调整键盘到页面底部;
&!-- 可以滚动的区域 --&
&main className='scrollWrapper'&
&!-- 内容在这里... --&
&!-- fixed定位在底部的输入框 --&
&div className='inputBox' contenteditable='true' placeholder='请输入评论'&&/div&
.scrollWrapper {
position:/* 绝对定位，进行内部滚动 */
bottom: 0;
overflow-y:/* 或者scroll */
-webkit-overflow-scrolling:/* 解决ios滑动不流畅问题 */
原因如下面两张图所示, 其实稍微注意一下, 可以看到原生输入法比第三方输入法少了一个tool bar, 就是这个罪魁祸首:
// 输入框获取焦点, 键盘完全弹出再调整输入框位置(因ios键盘弹出不会触发resize事件, 故延时600ms)
// 选择setInterval轮询几次更好
setTimeout(() =& {
// 挂载this上, 或者声明一个全局变量, 用于在失去焦点时, 要不要执行调整代码(非第三方不调整)
this.inputIsNotInView = this.notInView()
if (this.inputIsNotInView) {
// Width, Height: 分别是键盘没有弹出时window.innerWidth和window.innerHeight
// 88: 是第三方输入法比原生输入法多的那个tool bar(输入时显示带选项) 的高度, 做的不是太绝, 高度是统一的
// ios第三方输入法的tool bar 甚至 键盘也被当作可视区域了(包含在键盘弹出时的window.innerHeight)
if (Width != 750) {
let bottomAdjust = (Height - window.innerHeight - 88) + 'px'
$(this.inputBoxContainer).css('bottom', bottomAdjust)
// 'iphone 6 6s, 需要额外减去键盘高度432(见下图), 还算有良心, 高度和原生保持一致')
let bottomAdjust = (Height - window.innerHeight - 88 - 432) + 'px'
$(this.inputBoxContainer).css('bottom', bottomAdjust)
--------------------------------------------------------------------------------------
// 失去焦点, 键盘开始收起, 隐藏inputB 等键盘完全收起, 再显示inputBox, 设置在底部, 避免闪跳
if (this.inputIsNotInView) {
// display和opacity + bottom 会有闪跳
$(this.inputBoxContainer).css({ 'opacity': 0, bottom: 0 })
setTimeout(() =& {
$(this.inputBoxContainer).css('opacity', 1)
--------------------------------------------------------------------------------------
//判断元素是否在可视区域，不在的话返回true, 在返回false
notInView() {
// getBoundingClientRect 是获取定位的，很怪异, (iphone 6s 10.0 bate版表现特殊)
// top: 元素顶部到窗口（可是区域）顶部
// bottom: 元素底部到窗口顶部
// left: 元素左侧到窗口左侧
// right: 元素右侧到窗口左侧
// width/height 元素宽高
let bottom = this.inputBoxContainer.getBoundingClientRect().bottom
// 可视区域高度 - 元素底部到窗口顶部的高度 & 0, 则说明被键盘挡住了
if (window.innerHeight - bottom & 0) {
return true
return false
iphone 6 和 6s 奇葩现象
部分低端android机, 键盘收起后, 键盘区域显示空白, 需重新设置height, 如图:
// android, 键盘弹起/收回会触发resize事件
window.onresize = function () {
// Height: 键盘没有弹出时window.innerHeight
if (Height == window.innerHeight) {
$(this.scrollWrapper).css('height', window.innerHeight + 'px')
另外需要注意的是
js拿不到键盘的 弹起/收起 事件;
ios上键盘 弹起/收回 不会触发window.resize事件;
android 4.4 以下, 键盘唤起时, 不仅会触发resize, 而且会触发scroll事件;
(如果有需要滑动失去焦点这个需求, 选择touchMove, 不要选择scroll)
ios之所以会遮挡输入框, 是因为, 第三方输入法的tool bar 或者 键盘也被当做可视区域了(包含在键盘弹出时的window.innerHeight)
最后建议(ios已经完美解决, 此建议可酌情忽略了), 类似这种需求,尽量不要放在屏幕下50%
转场输入评论, 微博等;
弹窗到可视区域上50%区域, 3G门户;
23 收藏&&|&&130
你可能感兴趣的文章
6 收藏，1.1k
15 收藏，845
用这个，完美解决
//消息框获取焦点
$('#J_text').focus(function(){
interval = setInterval(function() {
scrollToEnd();
//消息框失去焦点
$('#J_text').blur(function(){
clearInterval(interval);
//滚动到底部function scrollToEnd(){
document.body.scrollTop = document.body.scrollH
用这个，完美解决
//消息框获取焦点
$('#J_text').focus(function(){
interval = setInterval(function() {
scrollToEnd();
//消息框失去焦点
$('#J_text').blur(function(){
clearInterval(interval);
//滚动到底部
function scrollToEnd(){
document.body.scrollTop = document.body.scrollH
布局用fixed
布局用fixed
谢谢，很好用，问题已解决
谢谢，很好用，问题已解决
太棒了。解决了我的问题。
太棒了。解决了我的问题。
多谢研究，我也一直遇到这个问题，不过没有时间去细致研究，最后给出的建议很中肯，转场输入是个不错的主意
多谢研究，我也一直遇到这个问题，不过没有时间去细致研究，最后给出的建议很中肯，转场输入是个不错的主意
嗯, 我也是前几天遇到了这个问题, 但是PM说必须这样实现, 只能花时间研究研究, 解决后总结一下
嗯, 我也是前几天遇到了这个问题, 但是PM说必须这样实现, 只能花时间研究研究, 解决后总结一下
已有完美解决办法了, 请看下更新, ?
已有完美解决办法了, 请看下更新, ?
想请问一下你，日完美解决的，是不是没有写footer啊
我现在就是ios上有问题，主体是main，底部是footer，应该怎么写呢
想请问一下你，日完美解决的，是不是没有写footer啊
我现在就是ios上有问题，主体是main，底部是footer，应该怎么写呢
这个解决的是固定在底部的输入框, 第三方键盘弹起时遮挡了输入框问题. 不过, 你可以把input改成footer啊, 不过我觉得, 移动端footer固定在底部的不太好吧...
这个解决的是固定在底部的输入框, 第三方键盘弹起时遮挡了输入框问题. 不过, 你可以把input改成footer啊, 不过我觉得, 移动端footer固定在底部的不太好吧...
图裂了。。
图裂了。。
我这没有啊, 是网络的原因吧?
我这没有啊, 是网络的原因吧?
赞，刚好遇到这个坑。感谢
赞，刚好遇到这个坑。感谢
setInterval是神器
setInterval是神器
这个方法好，必须好评
这个方法好，必须好评
setinterval 可以去掉，focus时处理就可以了、还有iOS下overflow：scroll会卡住这个bug怎么解决
setinterval 可以去掉，focus时处理就可以了、还有iOS下overflow：scroll会卡住这个bug怎么解决
小学僧表示不服啊，这方案我用了无效啊
小学僧表示不服啊，这方案我用了无效啊
楼主 快救我真的莫有用啊！
楼主 快救我真的莫有用啊！
我只有一个iphone 6s机子，呜呜呜
我只有一个iphone 6s机子，呜呜呜
你这个布局会导致 ios 系统自带的点击屏幕顶部
页面自动滚动到顶部 功能失效
你这个布局会导致 ios 系统自带的点击屏幕顶部
页面自动滚动到顶部 功能失效
但是这个会出现 下面在输入框跟 虚拟键盘有一段的距离啊 这个怎么破
但是这个会出现 下面在输入框跟 虚拟键盘有一段的距离啊 这个怎么破
使用这个方法 输入框出现闪动问题 是为什么呀？
使用这个方法 输入框出现闪动问题 是为什么呀？
ios11引起的，我也遇到了这个问题，还在解决中，敢问兄台解决了吗？
ios11引起的，我也遇到了这个问题，还在解决中，敢问兄台解决了吗？
找到了解决方案，根据ios版本，去掉滚动到底部的js，直接键盘就弹起就可以顶起来浮动。
找到了解决方案，根据ios版本，去掉滚动到底部的js，直接键盘就弹起就可以顶起来浮动。
楼1，这个ios11引起的，会闪动情况，用js ios版本识别，ios上去掉这段代码就好了。亲测好了。哈哈哈哈哈
楼1，这个ios11引起的，会闪动情况，用js ios版本识别，ios上去掉这段代码就好了。亲测好了。哈哈哈哈哈
并不行。。。去掉代码以后，也不是每次都可以弹起的输入框的
并不行。。。去掉代码以后，也不是每次都可以弹起的输入框的
ios11 屏幕闪动怎么解决
ios11 屏幕闪动怎么解决
仅仅在iphone X 上失效了啊，去掉滚动到底部的js，直接键盘就弹起也不行啊，求解惑。。。
仅仅在iphone X 上失效了啊，去掉滚动到底部的js，直接键盘就弹起也不行啊，求解惑。。。
ios11这个完美解决方案似乎失效了。。。
ios11这个完美解决方案似乎失效了。。。
ios11没用，请问你解决了吗
ios11没用，请问你解决了吗
你有解决方案了吗
@ludd[ludd] 你有解决方案了吗
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。苹果6s微信消息提示白底框怎么设置？_百度知道
苹果6s微信消息提示白底框怎么设置？
苹果6s微信消息提示白底框怎么设置？方法/步骤先请打开主屏上的“设置”应用，如下图所示在设置列表中找到“通知”一栏，点击打开。接下来请在通知列表中找到“微信”一栏，点击进入详细设置界面。随后请检查并确认“在锁定屏幕上显示”选项是否已经打开，没有打开的话请打开。如果已经打开，请先关闭再打开，这样就可以解决在锁屏上显示通知的消息。此外，在解锁后的提醒样式下面，如果当前选项是“无”的话，此时若我们正在使用手机，它是不会在屏幕顶部显示有微信消息通知的。6如下图所示，需要点击选择“横幅”选项，这样即可解决。苹果手机微信来信息在屏幕上显示内容设置去掉步骤：1.打开并登陆微信；2.进入微信主界面点击”我“，接着点击设置；3.在设置界面点击新消息提醒选项；4.进入取消勾选接收新消息通知即可。
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。苹果x屏幕出现放大框怎么办_百度知道
苹果x屏幕出现放大框怎么办
苹果x屏幕出现放大框怎么办
我有更好的答案
在设置里去调整。如果是指已经被放大了没法缩小，就双击屏幕，注意：要用3个手指头一起双击才管用！
VpnVip资讯教程，软件使用平台。
操作系统/系统故障
设置~通用~辅助功能~缩放关闭
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。苹果手机屏幕上出现一个透明框_百度知道
苹果手机屏幕上出现一个透明框
我有更好的答案
方法如下：1、选中“设置”2、用三个手指一起才能下拉屏幕，选中“通用”3、再用三个手指一起才能下拉屏幕，选中“辅助功能”4、找到第一个选项“VoiceOver”点击 关闭。试试吧
采纳率：87%
方法如下：1、选中“设置”2、用三个手指一起才能下拉屏幕，选中“通用”3、再用三个手指一起才能下拉屏幕，选中“辅助功能”4、找到第一个选项“VoiceOver”点击 关闭。试试吧
本回答被网友采纳
连按3下HOME键
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。}