题目概述
题目1：H5 web 挪动端 输入框, 键盘唤起后fixed定位好的元素追随页面转动了起来… fixed属性失效了！满屏率性横飞, 如下图:
题目2：有第三方输入法的ios机还会涌现键盘弹出耽误，致使一般规划 输入框(input/textarea等) 位置靠下的被键盘盖住, 如下图:
(这个’完成’出来, 然后’键盘’再顶起)
2016-11-04圆满处理方案
// CSS
.scrollWrapper {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top:0;
}
bottomInput {
position: absolute;
bottom:0;
left:0;
right: 0;
}
// HTML
<body>
<div class="scrollWrapper">
<div class="bottomInput">
<input type="text" placeholder="input"/>
</div>
</div>
</body>
// javascript
// 在输入框猎取核心, 键盘弹起后, 真的是一行代码
var interval = setInterval(function() {
document.body.scrollTop = document.body.scrollHeight
}, 100)注重: 下面处理ios键盘题目的是之前的旧要领, 照样有瑕疵, 可跳过看其他
处理思绪
题目1:
不让页面团体转动, 相对规划转动内容, 部份转动.
题目2:
键盘完整弹出时, 推断键盘是不是在可视地区(即屏幕撤除键盘占用的地区)
经由过程js来调解输入框的位置;
键盘完整收起后, 调解键盘到页面底部;
相干代码
题目1:
// HTML
<body>
<!-- 能够转动的地区 -->
<main className='scrollWrapper'>
<!-- 内容在这里... -->
</main>
<!-- fixed定位在底部的输入框 -->
<footer>
<div className='inputBox' contenteditable='true' placeholder='请输入批评'></div>
</footer>
</body>// CSS
.scrollWrapper {
position: absolute;/* 相对定位，举行内部转动 */
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: atuo;/* 或许scroll */
-webkit-overflow-scrolling: touch;/* 处理ios滑动不流通题目 */
}
footer {
position: fixed;
}题目2:
缘由如下面两张图所示, 实在轻微注重一下, 能够看到原生输入法比第三方输入法少了一个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)
}
else {
// 'iphone 6 6s, 须要分外减去键盘高度432(见下图), 还算有良知, 高度和原生保持一致')
let bottomAdjust = (Height - window.innerHeight - 88 - 432) + 'px'
$(this.inputBoxContainer).css('bottom', bottomAdjust)
}
}
}, 600)
--------------------------------------------------------------------------------------
// 落空核心, 键盘最先收起, 隐蔽inputBox; 等键盘完整收起, 再显现inputBox, 设置在底部, 防止闪跳
if (this.inputIsNotInView) {
// display和opacity + bottom 会有闪跳
$(this.inputBoxContainer).css({ 'opacity': 0, bottom: 0 })
setTimeout(() => {
$(this.inputBoxContainer).css('opacity', 1)
}, 600)
}
--------------------------------------------------------------------------------------
//推断元素是不是在可视地区，不在的话返回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流派;
